From c2962121d0187c6b4757542a0c019ad380c243a6 Mon Sep 17 00:00:00 2001 From: Alex Risch Date: Wed, 23 Oct 2024 17:09:54 -0400 Subject: [PATCH] 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 --- components/Chat/Chat.tsx | 68 ++++++++++++---------- components/Chat/Frame/FramePreview.tsx | 2 +- components/Chat/Message/Message.tsx | 1 + components/Chat/Message/MessageActions.tsx | 6 +- utils/frames.ts | 10 +++- 5 files changed, 49 insertions(+), 38 deletions(-) diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index 178fa0924..7239bb017 100644 --- 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,7 +89,7 @@ const useRenderItem = ({ message={{ ...item }} colorScheme={colorScheme} isGroup={!!conversation?.isGroup} - isFrame={!!framesStore[item.content.toLowerCase()]} + isFrame={isFrameMessage(item, framesStore)} /> ); }, @@ -93,33 +97,35 @@ const useRenderItem = ({ ); }; -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 index b35027758..873e6a395 100644 --- a/components/Chat/Frame/FramePreview.tsx +++ b/components/Chat/Frame/FramePreview.tsx @@ -347,7 +347,7 @@ export default function FramePreview({ {isContentType("text", message.contentType) && ( diff --git a/components/Chat/Message/MessageActions.tsx b/components/Chat/Message/MessageActions.tsx index daf9097f4..80e38c798 100644 --- 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,7 +287,6 @@ export default function ChatMessageActions({ }, [message]); const frameURL = useMemo(() => { - const isFrame = isFrameMessage(message); if (isFrame) { const frames = useFramesStore .getState() @@ -294,7 +294,7 @@ export default function ChatMessageActions({ return frames[0]?.url; } return null; - }, [message]); + }, [message, isFrame]); const animateInStyle = useAnimatedStyle(() => { return { diff --git a/utils/frames.ts b/utils/frames.ts index 4592438f2..3320918ed 100644 --- 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()] ); };