feat: share button

src/components/Demo.tsx

@@ -42,10 +42,7 @@ export default function Demo(
     added,
     notificationDetails,
     lastEvent,
-    addFrame,
-    addFrameResult,
-    openUrl,
-    close,
+    actions,
   } = useMiniApp();
   const [isContextOpen, setIsContextOpen] = useState(false);
   const [txHash, setTxHash] = useState<string | null>(null);
@@ -244,7 +241,7 @@ export default function Demo(
                 sdk.actions.openUrl
               </pre>
             </div>
-            <Button onClick={() => openUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")}>Open Link</Button>
+            <Button onClick={() => actions.openUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")}>Open Link</Button>
           </div>
 
           <div className="mb-4">
@@ -262,7 +259,7 @@ export default function Demo(
                 sdk.actions.close
               </pre>
             </div>
-            <Button onClick={close}>Close Frame</Button>
+            <Button onClick={actions.close}>Close Frame</Button>
           </div>
         </div>
 
@@ -290,15 +287,10 @@ export default function Demo(
           <div className="mb-4">
             <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
               <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
-                sdk.actions.addFrame
+                sdk.actions.addMiniApp
               </pre>
             </div>
-            {addFrameResult && (
-              <div className="mb-2 text-sm">
-                Add frame result: {addFrameResult}
-              </div>
-            )}
-            <Button onClick={addFrame} disabled={added}>
+            <Button onClick={actions.addMiniApp} disabled={added}>
               Add frame to client
             </Button>
           </div>

src/components/ui/Share.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useCallback, useState, useEffect } from 'react';
+import { Button } from './Button';
+import { useMiniApp } from '@neynar/react';
+import { type ComposeCast } from "@farcaster/frame-sdk";
+
+interface CastConfig extends ComposeCast.Options {
+  bestFriends?: boolean;
+}
+
+interface ShareButtonProps {
+  buttonText: string;
+  cast: CastConfig;
+  className?: string;
+  isLoading?: boolean;
+}
+
+export function ShareButton({ buttonText, cast, className = '', isLoading = false }: ShareButtonProps) {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [bestFriends, setBestFriends] = useState<{ fid: number; username: string; }[] | null>(null);
+  const { context, actions } = useMiniApp();
+
+  // Fetch best friends if needed
+  useEffect(() => {
+    if (cast.bestFriends && context?.user?.fid) {
+      setIsProcessing(true);
+      fetch(`/api/best-friends?fid=${context.user.fid}`)
+        .then(res => res.json())
+        .then(data => setBestFriends(data.bestFriends))
+        .catch(err => console.error('Failed to fetch best friends:', err))
+        .finally(() => setIsProcessing(false));
+    }
+  }, [cast.bestFriends, context?.user?.fid]);
+
+  const handleShare = useCallback(async () => {
+    try {
+      setIsProcessing(true);
+
+      let finalText = cast.text || '';
+
+      // Process best friends if enabled and data is loaded
+      if (cast.bestFriends && bestFriends) {
+        // Replace @N with usernames
+        finalText = finalText.replace(/@\d+/g, (match) => {
+          const friendIndex = parseInt(match.slice(1)) - 1;
+          const friend = bestFriends[friendIndex];
+          if (friend) {
+            return `@${friend.username}`;
+          }
+          return match;
+        });
+      }
+
+      // Process embeds
+      const processedEmbeds = await Promise.all(
+        (cast.embeds || []).map(async (embed) => {
+          if (typeof embed === 'string') {
+            return embed;
+          }
+          if (embed.path) {
+            const baseUrl = process.env.NEXT_PUBLIC_URL || window.location.origin;
+            const url = new URL(`${baseUrl}${embed.path}`);
+
+            // Add UTM parameters
+            url.searchParams.set('utm_source', `share-cast-${context?.user?.fid || 'unknown'}`);
+
+            // If custom image generator is provided, use it
+            if (embed.imageUrl) {
+              const imageUrl = await embed.imageUrl();
+              url.searchParams.set('share_image_url', imageUrl);
+            }
+
+            return url.toString();
+          }
+          return embed.url || '';
+        })
+      );
+
+      // Open cast composer with all supported intents
+      await actions.composeCast({
+        text: finalText,
+        embeds: processedEmbeds as [string] | [string, string] | undefined,
+        parent: cast.parent,
+        channel: cast.channelKey,
+        close: cast.close,
+      }, 'share-button');
+    } catch (error) {
+      console.error('Failed to share:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [cast, bestFriends, context?.user?.fid, actions]);
+
+  const isButtonDisabled = cast.bestFriends && !bestFriends;
+
+  return (
+    <Button
+      onClick={handleShare}
+      className={className}
+      isLoading={isLoading || isProcessing}
+      disabled={isButtonDisabled}
+    >
+      {buttonText}
+    </Button>
+  );
+}