Merge pull request #26 from neynarxyz/ds/neyn-2596-remove-default-han…

…dler-from-neynarfeedcard

fix: remove default handlers for write actions in `NeynarFeedCard` and in `NeynarCastCard` reactions

README.md

@@ -98,7 +98,18 @@ Params:
 - `type` ('url' | 'hash'): The type of identifier used for the cast.
 - `identifier` (string): The identifier (either URL or hash) for the cast.
 - `viewerFid?` (number): The FID of the viewer. Default: undefined.
-- `allowReactions?` (boolean, default = true): Whether to allow reactions on the cast, and when this is true the component default to using Neynar reactions
+- `allowReactions?` (boolean, default = false): Whether to allow reactions on the cast
+- `renderEmbeds`(boolean, default = true): Whether to allow rendering of cast embeds
+- `renderFrames`(boolean, default = false): Whether to allow rendering of cast frames(note: if you pass in true, you must also set a value for `onFrameBtnPress`)
+- `onLikeBtnPress`(() => boolean) A handler to add functionality when the like button is pressed. A response of `true` indicates the like action is successful
+- `onRecastBtnPress`(() => boolean) A handler to add functionality when the recast button is pressed. A response of `true` indicates the recast action is successful
+- `onCommentBtnPress`(() => boolean) A handler to add functionality when the comment button is pressed. A response of `true` indicates the comment action is successful
+- `onFrameBtnPress?: (
+    btnIndex: number,
+    localFrame: NeynarFrame,
+    setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
+    inputValue?: string
+  ) => Promise<NeynarFrame>;`: A handler to add functionality when a frame button is pressed.
 - `customStyles?` (CSSProperties): Custom styles for the cast card. Default: {}
 
 Usage:
@@ -169,7 +180,12 @@ This component displays a specific frame on Farcaster.
 
 Params:
 - `url` (string): The URL to fetch the frame data from.
-- `onFrameBtnPress?` (function): A callback function triggered when a button in the frame is pressed. Default: The SDK handles POST actions through the Neynar API.
+- `onFrameBtnPress: (
+    btnIndex: number,
+    localFrame: NeynarFrame,
+    setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
+    inputValue?: string
+  ) => Promise<NeynarFrame>;`: A handler to add functionality when a frame button is pressed.
 - `initialFrame?` (NeynarFrame): The initial frame data to display. Default: undefined.
 
 Usage:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",

src/components/molecules/CastCard.tsx

@@ -8,17 +8,7 @@ import { useRenderEmbeds } from "../organisms/NeynarCastCard/hooks/useRenderEmbe
 import Reactions from "../atoms/Reactions";
 import { ShareToClipboardIcon } from "../atoms/icons/ShareToClipboardIcon";
 import { SKELETON_PFP_URL } from "../../constants";
-import { NeynarFrameCard, NeynarFrame as NeynarFrameCardType } from "../organisms/NeynarFrameCard";
-
-type NeynarFrame = {
-    image: string;
-    frames_url: string;
-    post_url?: string;
-    buttons: {
-        index: number;
-        title: string;
-    }[];
-};
+import { NeynarFrameCard, type NeynarFrame } from "../organisms/NeynarFrameCard";
 
 const StyledCastCard = styled.div(({ theme }) => ({
   display: "flex",
@@ -156,9 +146,17 @@ export type CastCardProps = {
   isOwnProfile?: boolean;
   isEmbed?: boolean;
   allowReactions: boolean;
-  onComment?: () => void;
-  onRecast?: () => void;
-  onLike?: (newVal: boolean) => void;
+  renderEmbeds: boolean;
+  renderFrames: boolean;
+  onLikeBtnPress?: () => boolean;
+  onRecastBtnPress?: () => boolean;
+  onCommentBtnPress?: () => void;
+  onFrameBtnPress?: (
+    btnIndex: number,
+    localFrame: NeynarFrame,
+    setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
+    inputValue?: string
+  ) => Promise<NeynarFrame>;
   direct_replies?: CastCardProps[];
   customStyles?: React.CSSProperties;
 };
@@ -179,9 +177,12 @@ export const CastCard = React.memo(
     hasPowerBadge,
     isEmbed = true,
     allowReactions,
-    onComment,
-    onRecast,
-    onLike,
+    renderEmbeds,
+    renderFrames,
+    onLikeBtnPress,
+    onRecastBtnPress,
+    onCommentBtnPress,
+    onFrameBtnPress,
     direct_replies,
     customStyles
   }: CastCardProps) => {
@@ -202,12 +203,14 @@ export const CastCard = React.memo(
     }, [reactions.likes, viewerFid]);
 
     const handleLike = useCallback((newVal: boolean) => {
-      setLikesCount(prev => newVal ? prev + 1 : prev - 1);
-      setIsLiked(newVal);
-      if (onLike) {
-        onLike(newVal);
+      if (onLikeBtnPress) {
+        const likeBtnPressResp = onLikeBtnPress();
+        if(likeBtnPressResp){
+          setLikesCount(prev => newVal ? prev + 1 : prev - 1);
+          setIsLiked(newVal);
+        }
       }
-    }, [onLike]);
+    }, [onLikeBtnPress]);
 
     const renderedEmbeds = useRenderEmbeds(filteredEmbeds, allowReactions, viewerFid);
 
@@ -242,31 +245,36 @@ export const CastCard = React.memo(
             <Box spacingVertical="15px">
               <LinkifiedText>{linkifiedText}</LinkifiedText>
             </Box>
-            {filteredEmbeds && filteredEmbeds.length > 0 && (
+            {renderEmbeds && filteredEmbeds && filteredEmbeds.length > 0 ? (
               <EmbedsContainer style={{ margin: isSingle ? '10px 0' : '0' }}>
                 {renderedEmbeds.map((embed, index) => (
                   <div key={index} style={{ width: '100%' }}>
                     {embed}
                   </div>
                 ))}
               </EmbedsContainer>
-            )}
-            {frames && frames.length > 0 && (
-              <EmbedsContainer>
-               {frames.map((frame: any) => {
-                return (
-                    <NeynarFrameCard key={frame.frames_url} url={frame.frames_url} initialFrame={frame} />
-                );
-               })}
-              </EmbedsContainer>
-            )}
+            ) : <></>}
+            {
+              renderFrames && frames && frames.length > 0 ? (
+                <EmbedsContainer>
+                  {frames.map((frame: NeynarFrame) => (
+                    <NeynarFrameCard 
+                      key={frame.frames_url} 
+                      url={frame.frames_url} 
+                      initialFrame={frame} 
+                      onFrameBtnPress={onFrameBtnPress!}
+                    />
+                  ))}
+                </EmbedsContainer>
+              ) : null
+            }
             <ReactionsContainer style={{ justifyContent: allowReactions ? 'space-between' : 'flex-end' }}>
               {allowReactions && (
                 <Reactions
                   hash={hash}
                   reactions={reactions}
-                  onComment={onComment}
-                  onRecast={onRecast}
+                  onComment={onCommentBtnPress}
+                  onRecast={onRecastBtnPress}
                   onLike={handleLike}
                   isLiked={isLiked}
                 />

src/components/molecules/FrameCard.tsx

@@ -78,9 +78,12 @@ const FlexContainer = styled.div({
 const InputField = styled.input({
   border: "1px solid rgba(255, 255, 255, 0.2)",
   borderRadius: "8px",
-  padding: "8px",
-  marginTop: "8px",
-  width: "100%",
+  padding: "2%",
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "8px",
+  width: "94%",
+  marginLeft: "1%",
   fontSize: "14px",
   backgroundColor: "#1E1E1E",
   color: "white",
@@ -186,7 +189,7 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
       case "1.91:1":
         return { aspectRatio: "1.91 / 1" };
       default:
-        return {};
+        return { aspectRatio: "1.91 / 1" };
     }
   };
 

src/components/organisms/NeynarCastCard/index.tsx

@@ -3,6 +3,7 @@ import { NEYNAR_API_URL } from "../../../constants";
 import { useNeynarContext } from "../../../contexts";
 import { CastCard } from "../../molecules/CastCard";
 import customFetch from "../../../utils/fetcher";
+import { type NeynarFrame } from "../NeynarFrameCard";
 
 async function fetchCastByIdentifier({
   type,
@@ -32,15 +33,30 @@ export type NeynarCastCardProps = {
   viewerFid?: number;
   allowReactions?: boolean;
   renderEmbeds?: boolean;
+  renderFrames?: boolean;
+  onLikeBtnPress?: () => boolean;
+  onRecastBtnPress?: () => boolean;
+  onCommentBtnPress?: () => void;
+  onFrameBtnPress?: (
+    btnIndex: number,
+    localFrame: NeynarFrame,
+    setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
+    inputValue?: string
+  ) => Promise<NeynarFrame>;
   customStyles?: React.CSSProperties;
 };
 
 export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
   type,
   identifier,
   viewerFid,
-  allowReactions = true,
+  allowReactions = false,
   renderEmbeds = true,
+  renderFrames = false,
+  onLikeBtnPress,
+  onRecastBtnPress,
+  onCommentBtnPress,
+  onFrameBtnPress,
   customStyles
 }) => {
   const { client_id } = useNeynarContext();
@@ -71,7 +87,10 @@ export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
   }
 
   if (!castData || error) {
-    return <div>Error fetching user data</div>;
+    return <div>Error: could not fetch cast data</div>;
+  }
+  if (renderFrames && !onFrameBtnPress) {
+    return <div>Error: onFrameBtnPress must be provided when renderEmbeds is true.</div>;
   }
 
   return (
@@ -83,8 +102,10 @@ export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
       hash={castData.hash}
       reactions={castData.reactions}
       replies={castData.replies.count}
-      embeds={renderEmbeds ? castData.embeds : []}
+      embeds={castData.embeds ?? []}
       frames={castData.frames ?? []}
+      renderEmbeds={renderEmbeds}
+      renderFrames={renderFrames}
       channel={castData.channel ? {
         id: castData.channel.id,
         name: castData.channel.name,
@@ -95,6 +116,10 @@ export const NeynarCastCard: React.FC<NeynarCastCardProps> = ({
       hasPowerBadge={castData.author.power_badge}
       isOwnProfile={isOwnProfile}
       customStyles={customStyles}
+      onLikeBtnPress={onLikeBtnPress}
+      onRecastBtnPress={onRecastBtnPress}
+      onCommentBtnPress={onCommentBtnPress}
+      onFrameBtnPress={onFrameBtnPress}
     />
   );
 };

src/components/organisms/NeynarConversationList/index.tsx

@@ -56,11 +56,13 @@ function formatCast(cast: any): CastCardProps {
         replies: cast.replies.count,
         embeds: cast.embeds,
         frames: cast.frames,
+        renderEmbeds: cast.renderEmbeds,
         channel: cast.channel,
         viewerFid: 2,
         hasPowerBadge: cast.author.power_badge,
         isOwnProfile: false,
         allowReactions: true,
+        renderFrames: false,
         direct_replies: cast.direct_replies ? cast.direct_replies.map(formatCast) : [],
     };
 }

src/components/organisms/NeynarFeedList/index.tsx

@@ -43,11 +43,13 @@ function formatCasts(casts: any[]): CastCardProps[] {
             replies: cast?.replies?.count ?? 0,
             embeds: cast?.embeds ?? [],
             frames: cast?.frames ?? [],
+            renderEmbeds: cast?.renderEmbeds ?? true,
             channel: cast?.channel ?? '',
             viewerFid: 2,
             hasPowerBadge: cast?.author?.power_badge ?? false,
             isOwnProfile: false,
             allowReactions: true,
+            renderFrames: false,
         };
     });
 }