diff --git a/frontend/package.json b/frontend/package.json index 5c837bfa0..f5f0970a2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -68,6 +68,7 @@ "react-day-picker": "^9.11.0", "react-dom": "18.3.1", "react-hook-form": "^7.60.0", + "react-linkify-it": "^2.0.0", "react-lottie": "^1.2.4", "react-qr-code": "^2.0.12", "react-resizable-panels": "^3.0.6", diff --git a/frontend/src/components/TransactionItem.tsx b/frontend/src/components/TransactionItem.tsx index e043ed323..093daadd0 100644 --- a/frontend/src/components/TransactionItem.tsx +++ b/frontend/src/components/TransactionItem.tsx @@ -12,6 +12,7 @@ import { } from "lucide-react"; import { nip19 } from "nostr-tools"; import React from "react"; +import { LinkIt } from "react-linkify-it"; import { Link } from "react-router-dom"; import AppAvatar from "src/components/AppAvatar"; import ExternalLink from "src/components/ExternalLink"; @@ -48,6 +49,34 @@ function safeNpubEncode(hex: string): string | undefined { } } +const URL_REGEX = + /(https?:\/\/[^\s]+|(?:www\.)?[a-zA-Z0-9][-a-zA-Z0-9]*\.[a-zA-Z]{2,}(?:\/[^\s]*)?)/gi; + +function LinkifyUrls({ children }: { children: string }) { + return ( + { + const href = match.startsWith("http") ? match : `https://${match}`; + return ( + e.stopPropagation()} + > + {match} + + ); + }} + > + {children} + + ); +} + function TransactionItem({ tx }: Props) { const { data: app } = useApp(tx.appId); const swapId = tx.metadata?.swap_id; @@ -183,7 +212,7 @@ function TransactionItem({ tx }: Props) {

- {description} + {description || ""}

@@ -285,7 +314,7 @@ function TransactionItem({ tx }: Props) {

Description

- {tx.description} + {tx.description}

)} @@ -293,7 +322,7 @@ function TransactionItem({ tx }: Props) {

Comment

- {tx.metadata.comment} + {tx.metadata.comment}

)} @@ -301,7 +330,7 @@ function TransactionItem({ tx }: Props) {

Payer Note

- {bolt12Offer.payer_note} + {bolt12Offer.payer_note}

)} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 9f1b0efd1..32c38a81b 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5300,6 +5300,11 @@ react-is@^18.3.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-linkify-it@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-linkify-it/-/react-linkify-it-2.0.0.tgz#337222fb3d718ab0f48796a4def8c2946eae527d" + integrity sha512-L9FY853JgBL+HXyXUZMvMin95WZ/lHNrpBs28P8WYk7B4zC2z7e0j/BrDfjIqB8ZeDCpcBgcWi+Cwjbd4/OlyQ== + react-lottie@^1.2.4: version "1.2.10" resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.10.tgz#399f78a448a7833b2380d74fc489ecf15f8d18c7"