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
  • Transaction descriptions, comments, and payer notes now render clickable external links.
  • Link detection works in both compact transaction rows and detailed transaction panels, making embedded URLs easy to open.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds URL linkification to transaction text fields in the frontend by integrating react-linkify-it and wrapping description, metadata comment, and BOLT12 payer_note fields so detected URLs render as clickable external links.

Changes

Cohort / File(s)	Summary
Dependency Addition frontend/package.json	Added react-linkify-it (^2.0.0) dependency for URL linkification.
URL Linkification Integration frontend/src/components/TransactionItem.tsx	Imported LinkIt (react-linkify-it), introduced a LinkifyUrls usage and URL_REGEX, and wrapped compact-row description plus details panel fields (tx.description, tx.metadata.comment, bolt12Offer.payer_note) to render detected URLs as clickable links.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 I nibble code and find delight,
I turn plain memos into clickable light.
Links now hop where eyes can see,
Memos sing so merrily — whee! 🥕✨

🚥 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 'feat: add clickable hyperlinks in transaction memos' directly summarizes the main change - adding URL linkification to transaction memos using LinkIt library.
Linked Issues check	✅ Passed	The PR implements the core requirement from #1515: rendering clickable hyperlinks in transaction memos (description, comments, metadata fields) allowing URLs to open in new tabs.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue objective - adding URL linkification to transaction fields. Only necessary files modified: TransactionItem component and package.json dependency.

_{✏️ 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?

[kanishka0411]

Thanks for the feedback! I've updated the PR to use react-linkify-it instead of custom code

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/TransactionItem.tsx`:
- Around line 186-188: The LinkItUrl inside TransactionItem's paragraph is
causing link clicks to propagate and open the surrounding DialogTrigger; stop
that by preventing event propagation on the container: add an onClick={(e) =>
e.stopPropagation()} to the <p> (or wrap LinkItUrl in a wrapper element that
calls e.stopPropagation()) so anchor clicks do not bubble to the dialog, and
ensure LinkItUrl anchors render with target="_blank" and rel="noopener
noreferrer" (or switch to LinkIt with a custom renderer) to open external links
safely.

🧹 Nitpick comments (2)

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

285-291: Apply the same custom link component for security and consistency.

While this usage isn't inside a DialogTrigger, it should still use a custom component to ensure links open in new tabs with proper rel="noopener noreferrer" attributes to prevent tabnabbing. Using the same component across all LinkItUrl usages maintains consistency.

♻️ Suggested change

 <p className="text-muted-foreground break-all">
-  <LinkItUrl>{tx.description}</LinkItUrl>
+  <LinkItUrl component={ExternalMemoLink}>{tx.description}</LinkItUrl>
 </p>

---

293-308: Apply consistent link handling for Comment and Payer Note fields.

Same recommendation applies here: use the custom link component for security attributes (target="_blank" and rel="noopener noreferrer") across all linkified text fields.

♻️ Suggested changes

 <p className="text-muted-foreground break-all">
-  <LinkItUrl>{tx.metadata.comment}</LinkItUrl>
+  <LinkItUrl component={ExternalMemoLink}>{tx.metadata.comment}</LinkItUrl>
 </p>

 <p className="text-muted-foreground break-all">
-  <LinkItUrl>{bolt12Offer.payer_note}</LinkItUrl>
+  <LinkItUrl component={ExternalMemoLink}>{bolt12Offer.payer_note}</LinkItUrl>
 </p>