feat: add clickable hyperlinks in transaction memos

Author: kanishka0411

frontend/src/components/TransactionItem.tsx

@@ -31,6 +31,7 @@ import { ALBY_ACCOUNT_APP_NAME } from "src/constants";
 import { useApp } from "src/hooks/useApp";
 import { useSwap } from "src/hooks/useSwaps";
 import { copyToClipboard } from "src/lib/clipboard";
+import { linkifyText } from "src/lib/linkify";
 import { cn } from "src/lib/utils";
 import { Transaction } from "src/types";
 
@@ -183,7 +184,7 @@ function TransactionItem({ tx }: Props) {
               </span>
             </div>
             <p className="text-sm md:text-base text-muted-foreground break-all line-clamp-1">
-              {description}
+              {linkifyText(description || "")}
             </p>
           </div>
           <div className="flex ml-auto space-x-3 shrink-0">
@@ -285,23 +286,23 @@ function TransactionItem({ tx }: Props) {
               <div className="mt-6">
                 <p>Description</p>
                 <p className="text-muted-foreground break-all">
-                  {tx.description}
+                  {linkifyText(tx.description)}
                 </p>
               </div>
             )}
             {tx.metadata?.comment && (
               <div className="mt-6">
                 <p>Comment</p>
                 <p className="text-muted-foreground break-all">
-                  {tx.metadata.comment}
+                  {linkifyText(tx.metadata.comment)}
                 </p>
               </div>
             )}
             {bolt12Offer?.payer_note && (
               <div className="mt-6">
                 <p>Payer Note</p>
                 <p className="text-muted-foreground break-all">
-                  {bolt12Offer.payer_note}
+                  {linkifyText(bolt12Offer.payer_note)}
                 </p>
               </div>
             )}

frontend/src/lib/linkify.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+const URL_REGEX =
+  /(https?:\/\/[^\s]+|(?:www\.)?[a-zA-Z0-9][-a-zA-Z0-9]*\.[a-zA-Z]{2,}(?:\/[^\s]*)?)/gi;
+export function linkifyText(text: string): React.ReactNode {
+  if (!text) {
+    return text;
+  }
+
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+  URL_REGEX.lastIndex = 0;
+
+  while ((match = URL_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    const url = match[0];
+    const href = url.startsWith("http") ? url : `https://${url}`;
+
+    parts.push(
+      <a
+        key={match.index}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-primary underline hover:no-underline"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {url}
+      </a>
+    );
+
+    lastIndex = match.index + url.length;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  if (parts.length === 0) {
+    return text;
+  }
+
+  return <>{parts}</>;
+}