fix: dont fail to render with invalid URLs

src/Text.js

@@ -1,5 +1,3 @@
-import { useMemo } from "react";
-
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { TwitterTweetEmbed } from "react-twitter-embed";
@@ -11,54 +9,59 @@ import LazyImage from "./element/LazyImage";
 import Hashtag from "./element/Hashtag";
 
 function transformHttpLink(a) {
-    const url = new URL(a);
-    const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
-    const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
-    const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
-    if (extension) {
-        switch (extension) {
-            case "gif":
-            case "jpg":
-            case "jpeg":
-            case "png":
-            case "bmp":
-            case "webp": {
-                return <LazyImage key={url} src={url} />;
+    try {
+        const url = new URL(a);
+        const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
+        const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
+        const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
+        if (extension) {
+            switch (extension) {
+                case "gif":
+                case "jpg":
+                case "jpeg":
+                case "png":
+                case "bmp":
+                case "webp": {
+                    return <LazyImage key={url} src={url} />;
+                }
+                case "mp4":
+                case "mov":
+                case "mkv":
+                case "avi":
+                case "m4v": {
+                    return <video key={url} src={url} controls />
+                }
+                default:
+                    return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
             }
-            case "mp4":
-            case "mov":
-            case "mkv":
-            case "avi":
-            case "m4v": {
-                return <video key={url} src={url} controls />
-            }
-            default:
-                return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
+        } else if (tweetId) {
+          return (
+            <div className="tweet" key={tweetId}>
+              <TwitterTweetEmbed tweetId={tweetId} />
+            </div>
+          )
+        } else if (youtubeId) {
+            return (
+                <>
+                    <br />
+                    <iframe
+                        className="w-max"
+                        src={`https://www.youtube.com/embed/${youtubeId}`}
+                        title="YouTube video player"
+                        key={youtubeId}
+                        frameBorder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowFullScreen=""
+                    />
+                    <br />
+                </>
+            )
+        } else {
+            return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
         }
-    } else if (tweetId) {
-      return (
-        <div className="tweet">
-          <TwitterTweetEmbed tweetId={tweetId} />
-        </div>
-      )
-    } else if (youtubeId) {
-        return (
-            <>
-                <br />
-                <iframe
-                    className="w-max"
-                    src={`https://www.youtube.com/embed/${youtubeId}`}
-                    title="YouTube video player"
-                    frameBorder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowFullScreen=""
-                />
-                <br />
-            </>
-        )
-    } else {
-        return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
+    } catch (error) {
     }
+    return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
 }
 
 function extractLinks(fragments) {
@@ -75,7 +78,7 @@ function extractLinks(fragments) {
     }).flat();
 }
 
-export function extractMentions(fragments, tags, users) {
+export function extractMentions(fragments, tags = [], users = {}) {
     return fragments.map(f => {
         if (typeof f === "string") {
             return f.split(MentionRegex).map((match) => {
@@ -135,36 +138,32 @@ function extractHashtags(fragments) {
     }).flat();
 }
 
-function transformLi({ body, transforms }) {
-  let fragments = transformText({ body, transforms })
+function transformLi({ body, tags, users }) {
+  let fragments = transformText({ body, tags, users })
   return <li>{fragments}</li>
 }
 
-function transformParagraph({ body, transforms }) {
-  const fragments = transformText({ body, transforms })
+function transformParagraph({ body, tags, users }) {
+  const fragments = transformText({ body, tags, users })
   if (fragments.every(f => typeof f === 'string')) {
     return <p>{fragments}</p>
   }
   return <>{fragments}</>
 }
 
-function transformText({ body, transforms }) {
-    let fragments = [body];
-    transforms?.forEach(a => {
-        fragments = a(fragments);
-    });
+function transformText({ body, tags, users }) {
+    let fragments = extractMentions(body);
     fragments = extractLinks(fragments);
     fragments = extractInvoices(fragments);
     fragments = extractHashtags(fragments);
-
     return fragments;
 }
 
-export default function Text({ content, transforms }) {
+export default function Text({ content, tags, users }) {
     const components = {
-      p: (props) => transformParagraph({ body: props.children, transforms }),
+      p: (props) => transformParagraph({ body: props.children, tags, users }),
       a: (props) => transformHttpLink(props.href),
-      li: (props) => transformLi({ body: props.children, transforms }),
+      li: (props) => transformLi({ body: props.children, tags, users }),
     }
     return <ReactMarkdown components={components}>{content}</ReactMarkdown>
 }

src/Util.js

@@ -62,8 +62,13 @@ export function hexToBech32(hrp, hex) {
         return "";
     }
 
-    let buf = secp.utils.hexToBytes(hex);
-    return bech32.encode(hrp, bech32.toWords(buf));
+    try {
+        let buf = secp.utils.hexToBytes(hex);
+        return bech32.encode(hrp, bech32.toWords(buf));
+    } catch (e) {
+        console.warn("Invalid hex", hex, e);
+        return "";
+    }
 }
 
 /**
@@ -122,4 +127,4 @@ export function extractLnAddress(lnurl) {
         }
     }
     return lnurl;
-}
+}

src/element/Note.js

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 import Event from "../nostr/Event";
 import ProfileImage from "./ProfileImage";
-import Text, { extractMentions } from "../Text";
+import Text from "../Text";
 import { eventLink, hexToBech32 } from "../Util";
 import NoteFooter from "./NoteFooter";
 import NoteTime from "./NoteTime";
@@ -31,10 +31,7 @@ export default function Note(props) {
         if (deletion?.length > 0) {
             return (<b className="error">Deleted</b>);
         }
-        const mentions = (fragments) => {
-            return extractMentions(fragments, ev.Tags, users);
-        }
-        return <Text content={body} transforms={[mentions]} />;
+        return <Text content={body} tags={ev.Tags} users={users} />;
     }, [data, dataEvent, reactions, deletion]);
 
     function goToEvent(e, id) {

src/pages/ProfilePage.js

@@ -11,7 +11,7 @@ import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
 import { extractLnAddress, parseId, hexToBech32 } from "../Util";
 import Timeline from "../element/Timeline";
-import Text, { mentions } from '../Text'
+import Text from '../Text'
 import LNURLTip from "../element/LNURLTip";
 import Nip05, { useIsVerified } from "../element/Nip05";
 import Copy from "../element/Copy";