From ccd0aa42f0dde919e47fcf8f8a498687a7316c52 Mon Sep 17 00:00:00 2001
From: Alex Risch <alex.j.risch@gmail.com>
Date: Wed, 23 Oct 2024 19:39:50 -0400
Subject: [PATCH] fix: URL Crash  (#1084)

* fix: URL Crash

Added safety to URL
Reverted to FramesStore access for full frame

* fix: URL Crashes

Reverted change to set isFrames
Added additional safety
Attempted some improved performance
---
 components/Chat/Chat.tsx            |  9 +++++----
 components/Chat/Message/Message.tsx |  6 +++++-
 utils/messageContent.ts             | 10 +++++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 7239bb017..102e57e81 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -1,3 +1,4 @@
+import { useSelect } from "@data/store/storeHelpers";
 import { FlashList } from "@shopify/flash-list";
 import {
   backgroundColor,
@@ -5,7 +6,7 @@ import {
   tertiaryBackgroundColor,
 } from "@styles/colors";
 import { getCleanAddress } from "@utils/evm/address";
-import { FrameWithType, isFrameMessage } from "@utils/frames";
+import { FrameWithType } from "@utils/frames";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
@@ -89,7 +90,7 @@ const useRenderItem = ({
           message={{ ...item }}
           colorScheme={colorScheme}
           isGroup={!!conversation?.isGroup}
-          isFrame={isFrameMessage(item, framesStore)}
+          isFrame={!!framesStore[item.content.toLowerCase().trim()]}
         />
       );
     },
@@ -382,7 +383,7 @@ export function Chat() {
     styles.inChatRecommendations,
   ]);
 
-  const framesStore = useFramesStore().frames;
+  const { frames: framesStore } = useFramesStore(useSelect(["frames"]));
 
   const showPlaceholder = useIsShowingPlaceholder({
     messages: listArray,
@@ -538,7 +539,7 @@ export function ChatPreview() {
     ]
   );
 
-  const framesStore = useFramesStore().frames;
+  const { frames: framesStore } = useFramesStore(useSelect(["frames"]));
 
   const showPlaceholder = useIsShowingPlaceholder({
     messages: listArray,
diff --git a/components/Chat/Message/Message.tsx b/components/Chat/Message/Message.tsx
index 77c39fdfc..eecbecfde 100644
--- a/components/Chat/Message/Message.tsx
+++ b/components/Chat/Message/Message.tsx
@@ -219,7 +219,11 @@ const ChatMessage = ({
   const contentType = getMessageContentType(message.contentType);
 
   const handleUrlPress = useCallback((url: string) => {
-    const uri = url.toLowerCase().startsWith("http") ? url : `https://${url}`;
+    const cleanedUrl = url.toLowerCase().trim();
+
+    const uri = cleanedUrl.startsWith("http")
+      ? cleanedUrl
+      : `https://${cleanedUrl}`;
 
     Linking.openURL(uri);
   }, []);
diff --git a/utils/messageContent.ts b/utils/messageContent.ts
index 7c0fb3f98..c24880f3b 100644
--- a/utils/messageContent.ts
+++ b/utils/messageContent.ts
@@ -1,8 +1,12 @@
 import emojiRegex from "emoji-regex";
 
-export const getUrlToRender = (url: string) => {
-  const fullUrl = new URL(url);
-  return fullUrl.hostname;
+export const getUrlToRender = (url: string): string | undefined => {
+  try {
+    const fullUrl = new URL(url);
+    return fullUrl.hostname;
+  } catch {
+    return undefined;
+  }
 };
 
 export const isAllEmojisAndMaxThree = (str: string) => {