fix: Render Frame on initial send (#1067)

* fix: Render Frame on initial send Fixes rendering from on initial send Cleans up types Updates utils * fix ratio types
ephemeraHQ · Oct 23, 2024 · c296212 · c296212
1 parent f8c6299
commit c296212
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 38 deletions.
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
@@ -5,9 +5,11 @@ import {
   tertiaryBackgroundColor,
 } from "@styles/colors";
 import { getCleanAddress } from "@utils/evm/address";
+import { FrameWithType, isFrameMessage } from "@utils/frames";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
+  ColorSchemeName,
   Dimensions,
   FlatList,
   Platform,
@@ -73,9 +75,11 @@ const useRenderItem = ({
   colorScheme,
 }: {
   xmtpAddress: string;
-  conversation: any;
-  framesStore: any;
-  colorScheme: any;
+  conversation: XmtpConversationWithUpdate | undefined;
+  framesStore: {
+    [frameUrl: string]: FrameWithType;
+  };
+  colorScheme: ColorSchemeName;
 }) => {
   return useCallback(
     ({ item }: { item: MessageToDisplay }) => {
@@ -85,41 +89,43 @@ const useRenderItem = ({
           message={{ ...item }}
           colorScheme={colorScheme}
           isGroup={!!conversation?.isGroup}
-          isFrame={!!framesStore[item.content.toLowerCase()]}
+          isFrame={isFrameMessage(item, framesStore)}
         />
       );
     },
     [colorScheme, xmtpAddress, conversation?.isGroup, framesStore]
   );
 };
 
-const getItemType = (framesStore: any) => (item: MessageToDisplay) => {
-  const fromMeString = item.fromMe ? "fromMe" : "notFromMe";
-  if (
-    isContentType("text", item.contentType) &&
-    item.converseMetadata?.frames?.[0]
-  ) {
-    const frameUrl = item.converseMetadata?.frames?.[0];
-    const frame = framesStore[frameUrl];
-    // Recycle frames with the same aspect ratio
-    return `FRAME-${
-      frame?.frameInfo?.image?.aspectRatio || "1.91.1"
-    }-${fromMeString}`;
-  } else if (
-    (isContentType("attachment", item.contentType) ||
-      isContentType("remoteAttachment", item.contentType)) &&
-    item.converseMetadata?.attachment?.size?.height &&
-    item.converseMetadata?.attachment?.size?.width
-  ) {
-    const aspectRatio = (
-      item.converseMetadata.attachment.size.width /
-      item.converseMetadata.attachment.size.height
-    ).toFixed(2);
-    return `ATTACHMENT-${aspectRatio}-${fromMeString}`;
-  } else {
-    return `${item.contentType}-${fromMeString}`;
-  }
-};
+const getItemType =
+  (framesStore: { [frameUrl: string]: FrameWithType }) =>
+  (item: MessageToDisplay) => {
+    const fromMeString = item.fromMe ? "fromMe" : "notFromMe";
+    if (
+      isContentType("text", item.contentType) &&
+      item.converseMetadata?.frames?.[0]
+    ) {
+      const frameUrl = item.converseMetadata?.frames?.[0];
+      const frame = framesStore[frameUrl];
+      // Recycle frames with the same aspect ratio
+      return `FRAME-${
+        frame?.frameInfo?.image?.aspectRatio || "1.91:1"
+      }-${fromMeString}`;
+    } else if (
+      (isContentType("attachment", item.contentType) ||
+        isContentType("remoteAttachment", item.contentType)) &&
+      item.converseMetadata?.attachment?.size?.height &&
+      item.converseMetadata?.attachment?.size?.width
+    ) {
+      const aspectRatio = (
+        item.converseMetadata.attachment.size.width /
+        item.converseMetadata.attachment.size.height
+      ).toFixed(2);
+      return `ATTACHMENT-${aspectRatio}-${fromMeString}`;
+    } else {
+      return `${item.contentType}-${fromMeString}`;
+    }
+  };
 
 const getListArray = (
   xmtpAddress?: string,

diff --git a/components/Chat/Frame/FramePreview.tsx b/components/Chat/Frame/FramePreview.tsx
@@ -347,7 +347,7 @@ export default function FramePreview({
           <FrameImage
             frameImage={frame.frameImage}
             frameImageAspectRatio={
-              frame.frameInfo?.image?.aspectRatio || "1.91.1"
+              frame.frameInfo?.image?.aspectRatio || "1.91:1"
             }
             linkToOpen={initialFrame.url}
             useMemoryCache={!frame.isInitialFrame || Platform.OS === "web"}

diff --git a/components/Chat/Message/Message.tsx b/components/Chat/Message/Message.tsx
@@ -415,6 +415,7 @@ const ChatMessage = ({
                   message={message}
                   reactions={reactions}
                   hideBackground={hideBackground}
+                  isFrame={isFrame}
                 >
                   {isContentType("text", message.contentType) && (
                     <FramesPreviews message={message} />

diff --git a/components/Chat/Message/MessageActions.tsx b/components/Chat/Message/MessageActions.tsx
@@ -11,7 +11,6 @@ import {
   myMessageHighlightedBubbleColor,
 } from "@styles/colors";
 import { useConversationContext } from "@utils/conversation";
-import { isFrameMessage } from "@utils/frames";
 import { navigate } from "@utils/navigation";
 import * as Haptics from "expo-haptics";
 import React, {
@@ -66,6 +65,7 @@ type Props = {
     [senderAddress: string]: MessageReaction[];
   };
   hideBackground: boolean;
+  isFrame: boolean;
 };
 
 enum ContextMenuActions {
@@ -79,6 +79,7 @@ export default function ChatMessageActions({
   message,
   reactions,
   hideBackground = false,
+  isFrame,
 }: Props) {
   const isAttachment = isAttachmentMessage(message.contentType);
   const isTransaction = isTransactionMessage(message.contentType);
@@ -286,15 +287,14 @@ export default function ChatMessageActions({
   }, [message]);
 
   const frameURL = useMemo(() => {
-    const isFrame = isFrameMessage(message);
     if (isFrame) {
       const frames = useFramesStore
         .getState()
         .getFramesForURLs(message.converseMetadata?.frames || []);
       return frames[0]?.url;
     }
     return null;
-  }, [message]);
+  }, [message, isFrame]);
 
   const animateInStyle = useAnimatedStyle(() => {
     return {

diff --git a/utils/frames.ts b/utils/frames.ts
@@ -270,11 +270,15 @@ export const handleTxAction = async (
   return { buttonPostUrl, txHash };
 };
 
-export const isFrameMessage = (message: MessageToDisplay): boolean => {
-  const framesStore = useFramesStore.getState().frames;
+export const isFrameMessage = (
+  message: MessageToDisplay,
+  framesStore: {
+    [frameUrl: string]: FrameWithType;
+  }
+): boolean => {
   return (
     isContentType("text", message.contentType) &&
     !!message.converseMetadata?.frames?.[0] &&
-    !!framesStore[message.converseMetadata.frames[0].toLowerCase()]
+    !!framesStore[message.converseMetadata.frames[0].toLowerCase().trim()]
   );
 };