Skip to content

fix(ndk_flutter): prevent QR code overflow in nostr connect dialog#636

Merged
nogringo merged 1 commit into
masterfrom
fix/nostr-connect-dialog-qr-overflow
May 22, 2026
Merged

fix(ndk_flutter): prevent QR code overflow in nostr connect dialog#636
nogringo merged 1 commit into
masterfrom
fix/nostr-connect-dialog-qr-overflow

Conversation

@nogringo
Copy link
Copy Markdown
Collaborator

@nogringo nogringo commented May 20, 2026

Constrain the QR view with a ConstrainedBox (maxWidth/maxHeight 300) so it no longer overflows on narrow screens nor stretches the dialog on wide ones. Also switch to PrettyQrSmoothSymbol with a standard quiet zone and force a white background for best scannabillity.

Wire up NostrConnect (app name + default relays) in the sample app's login popup and widgets demo, and wrap the login popup content in a SingleChildScrollView to avoid overflow when the dialog content grows.

Summary by CodeRabbit

  • Style

    • Redesigned login dialog with cleaner QR code layout, white background, and improved QR rendering
  • Refactor

    • Updated login configuration with relay network settings and app identification parameters

Review Change Stack

Constrain the QR view with a ConstrainedBox (maxWidth/maxHeight 300)
so it no longer overflows on narrow screens nor stretches the dialog
on wide ones. Also switch to PrettyQrSmoothSymbol with a standard
quiet zone and force a white background for best scannabillity.

Wire up NostrConnect (app name + default relays) in the sample app's
login popup and widgets demo, and wrap the login popup content in a
SingleChildScrollView to avoid overflow when the dialog content grows.
@nogringo nogringo requested review from 1-leo and frnandu May 20, 2026 22:42
@nogringo nogringo self-assigned this May 20, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 20, 2026

📝 Walkthrough

Walkthrough

The PR updates NostrConnect integration across the NDK Flutter package and sample app. The dialog view refines QR code visual presentation with white background and smoother rendering, while the sample app explicitly configures NostrConnect with standardized app name and relay endpoints in both the login popup and widgets demo.

Changes

NostrConnect UI and Configuration Updates

Layer / File(s) Summary
QR Dialog Visual Styling
packages/ndk_flutter/lib/widgets/login/nostr_connect_dialog_view.dart
AlertDialog background is set to white, QR content layout refactored from spacer-based Row into a centered 300×300 ConstrainedBox, and QR decoration switched from custom dots symbol to PrettyQrSmoothSymbol with roundFactor: 0 and standard quiet zone.
NostrConnect Configuration in Sample App
packages/sample-app/lib/login_popup.dart, packages/sample-app/lib/widgets_demo_page.dart
NDK package import added to both files; NLogin widget configuration extended with explicit NostrConnect instance specifying appName ("NDK sample app") and hardcoded relay endpoints across login popup and widgets demo.

🎯 2 (Simple) | ⏱️ ~10 minutes

🐰 The dialog shines bright and white,
QR codes render smooth and tight,
Relays relay, with name so clear,
NostrConnect's debut this cycle—cheer! 🎉

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the primary change: constraining the QR code in the nostr connect dialog to prevent overflow. This aligns with the main visual fix across the affected file.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/nostr-connect-dialog-qr-overflow

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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/sample-app/lib/widgets_demo_page.dart (1)

219-226: ⚡ Quick win

Extract duplicated NostrConnect configuration to a shared constant.

The NostrConnect configuration (appName and relays list) is duplicated between this file and login_popup.dart. Consider extracting these values to a shared constant to ensure consistency and simplify maintenance.

♻️ Proposed refactor

Create a new file lib/config/nostr_config.dart:

import 'package:ndk/ndk.dart';

const String kNostrAppName = 'NDK sample app';

const List<String> kNostrRelays = [
  "wss://relay.damus.io",
  "wss://relay.primal.net",
  "wss://relay.nmail.li",
];

NostrConnect createNostrConnect() {
  return NostrConnect(
    appName: kNostrAppName,
    relays: kNostrRelays,
  );
}

Then use it in both files:

+import 'package:ndk_demo/config/nostr_config.dart';

-nostrConnect: NostrConnect(
-  appName: 'NDK sample app',
-  relays: [
-    "wss://relay.damus.io",
-    "wss://relay.primal.net",
-    "wss://relay.nmail.li",
-  ],
-),
+nostrConnect: createNostrConnect(),
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/sample-app/lib/widgets_demo_page.dart` around lines 219 - 226,
Extract the duplicated NostrConnect config into shared constants and a factory:
create a new module exposing const String kNostrAppName, const List<String>
kNostrRelays and a helper NostrConnect createNostrConnect() that returns
NostrConnect(appName: kNostrAppName, relays: kNostrRelays). Replace the inline
NostrConnect(...) constructions in the code (the instances you see using
NostrConnect with appName and relays) to import the new module and call
createNostrConnect() (or use the constants) so both places reference the same
kNostrAppName / kNostrRelays values.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ndk_flutter/lib/widgets/login/nostr_connect_dialog_view.dart`:
- Around line 18-31: Replace the incorrect constant PrettyQrQuietZone.standard
with the correct PrettyQrQuietZone.standart in the PrettyQrView decoration;
update the usage inside the widget that builds the QR (the PrettyQrView.data /
PrettyQrDecoration block) so it matches the library's constant name (same fix
used elsewhere like in n_wallet_actions.dart).

---

Nitpick comments:
In `@packages/sample-app/lib/widgets_demo_page.dart`:
- Around line 219-226: Extract the duplicated NostrConnect config into shared
constants and a factory: create a new module exposing const String
kNostrAppName, const List<String> kNostrRelays and a helper NostrConnect
createNostrConnect() that returns NostrConnect(appName: kNostrAppName, relays:
kNostrRelays). Replace the inline NostrConnect(...) constructions in the code
(the instances you see using NostrConnect with appName and relays) to import the
new module and call createNostrConnect() (or use the constants) so both places
reference the same kNostrAppName / kNostrRelays values.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74541b2e-b322-4a08-accc-6104a820c17f

📥 Commits

Reviewing files that changed from the base of the PR and between 5e3186d and 0121c40.

📒 Files selected for processing (3)
  • packages/ndk_flutter/lib/widgets/login/nostr_connect_dialog_view.dart
  • packages/sample-app/lib/login_popup.dart
  • packages/sample-app/lib/widgets_demo_page.dart

@codecov
Copy link
Copy Markdown

codecov Bot commented May 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.09%. Comparing base (5e3186d) to head (0121c40).

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #636      +/-   ##
==========================================
+ Coverage   72.03%   72.09%   +0.05%     
==========================================
  Files         209      209              
  Lines       10653    10653              
==========================================
+ Hits         7674     7680       +6     
+ Misses       2979     2973       -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@nogringo nogringo merged commit 17875ab into master May 22, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants