feat: add clickable hyperlinks in transaction memos

[kanishka0411]

Fixes: #1515

Makes URLs in transaction memos clickable. Links open in a new tab.

Summary by CodeRabbit

• New Features
  • Text fields (descriptions, comments, payer notes) now automatically detect URLs and convert them into clickable links that open in a new tab. Links are styled consistently and clicking them won’t trigger surrounding item interactions, improving navigation and readability in both compact and expanded views.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds URL linkification: a new linkifyText utility detects URLs and returns React nodes with anchors; TransactionItem uses it to render linkified text for description, transaction comments, and payer notes in both compact and expanded views.

Changes

Cohort / File(s)	Summary
Linkify utility frontend/src/lib/linkify.tsx	New exported linkifyText(text: string): React.ReactNode that finds URLs via regex, wraps them in <a> tags (adds https:// when missing), sets target="_blank" and rel="noopener noreferrer", and prevents click propagation.
Transaction rendering frontend/src/components/TransactionItem.tsx	Imports and applies linkifyText to render linkified content for compact row description, tx.description, tx.metadata.comment, and bolt12Offer.payer_note in the details panel.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 I hopped in code to nudge and tweak,
Memo text now shines when links I seek,
Clicks that open new tabs with cheer,
Tiny changes, the path is clear,
Happy hops — linkified and sleek! 🥕🔗

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding clickable hyperlinks in transaction memos, which is the primary objective of the changeset.
Linked Issues check	✅ Passed	The PR implements the core requirement from issue #1515: rendering hyperlinks in memos so they become clickable, with links opening in new tabs as standard practice.
Out of Scope Changes check	✅ Passed	All changes directly support the hyperlink functionality: a linkify utility is created and integrated into TransactionItem for rendering URLs as clickable links in memos.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/lib/linkify.tsx`:
- Line 21: The protocol check is case-sensitive (url.startsWith("http")) while
the validation regex is case-insensitive, so URLs like "HTTP://example.com"
become "https://HTTP://example.com"; update the logic that computes href (use
the same case-insensitive test as the regex) by either normalizing the input
(e.g., url.toLowerCase().startsWith("http")) or replacing the check with a
case-insensitive regex test (e.g., /^https?:/i.test(url)); apply this change
where href is assigned (the code referencing url and href in linkify.tsx) so
uppercase protocols are detected correctly.

🧹 Nitpick comments (1)

frontend/src/lib/linkify.tsx (1)

3-4: URL regex may produce false positives and has limited validation.

The regex matches any word containing a dot followed by 2+ letters (e.g., test.co, file.txt), which could linkify unintended text. Consider:

• Requiring www. prefix for non-http URLs, or
• Validating against a known TLD list, or
• At minimum, requiring a longer TLD or path component

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/TransactionItem.tsx (1)

167-188: Avoid nested interactive elements inside DialogTrigger.

DialogTrigger renders a <button> by default, and linkified <a> tags inside it create invalid nested interactive elements (can break keyboard/mouse behavior). Consider asChild with a non‑interactive wrapper and explicit keyboard handling, or move the linkified text outside the trigger.

🛠️ Suggested structure

-    <DialogTrigger className="p-3 mb-4 hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer rounded-md slashed-zero transaction sensitive">
-      <div
-        className={cn(
-          "flex gap-3",
-          tx.state === "pending" && "animate-pulse"
-        )}
-      >
+    <DialogTrigger asChild>
+      <div
+        className="p-3 mb-4 hover:bg-muted/50 data-[state=selected]:bg-muted cursor-pointer rounded-md slashed-zero transaction sensitive"
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        }}
+      >
+        <div
+          className={cn(
+            "flex gap-3",
+            tx.state === "pending" && "animate-pulse"
+          )}
+        >
           {typeStateIcon}
           ...
-      </div>
-    </DialogTrigger>
+        </div>
+      </div>
+    </DialogTrigger>

[rolznz]

Hi, thanks for the PR. Is there a more standard way to do it then adding this custom linkify code?