@farcaster/snap 1.15.2 → 1.15.4

package/dist/react/components/action-button.d.ts

@@ -1,6 +1,7 @@
-export declare function SnapActionButton({ element: { props }, emit, }: {
+export declare function SnapActionButton({ element, emit, }: {
     element: {
         props: Record<string, unknown>;
+        on?: Record<string, unknown>;
     };
     emit: (name: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/action-button.js

@@ -1,11 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { ExternalLink } from "lucide-react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
 import { ICON_MAP } from "./icon.js";
-export function SnapActionButton({ element: { props }, emit, }) {
+function isExternalLinkAction(on) {
+    if (!on)
+        return false;
+    const press = on.press;
+    if (!press || press.action !== "open_url")
+        return false;
+    return press.params?.isSnap !== true;
+}
+export function SnapActionButton({ element, emit, }) {
+    const { props } = element;
     const label = String(props.label ?? "Action");
     const variant = String(props.variant ?? "secondary");
     const isPrimary = variant === "primary";
@@ -13,6 +23,7 @@ export function SnapActionButton({ element: { props }, emit, }) {
     const colors = useSnapColors();
     const [hovered, setHovered] = useState(false);
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
+    const showExternalIcon = isExternalLinkAction(element.on);
     const style = isPrimary
         ? {
             backgroundColor: hovered ? colors.accentHover : colors.accent,
@@ -20,9 +31,11 @@ export function SnapActionButton({ element: { props }, emit, }) {
             borderColor: "transparent",
         }
         : {
-            backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+            backgroundColor: hovered
+                ? `color-mix(in srgb, ${colors.accent} 15%, transparent)`
+                : colors.muted,
             color: colors.text,
             borderColor: "transparent",
         };
-    return (_jsx("div", { className: "w-full min-w-0 flex-1", children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("w-full gap-2"), style: style, onClick: () => emit("press"), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label] }) }));
+    return (_jsx("div", { className: "w-full min-w-0 flex-1", children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("w-full gap-2"), style: style, onClick: () => emit("press"), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label, showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
 }

package/dist/react/index.d.ts

@@ -12,7 +12,9 @@ export type SnapPage = {
 };
 export type SnapActionHandlers = {
     submit: (target: string, inputs: Record<string, JsonValue>) => void;
-    open_url: (target: string) => void;
+    open_url: (target: string, options?: {
+        isSnap?: boolean;
+    }) => void;
     open_mini_app: (target: string) => void;
     view_cast: (params: {
         hash: string;

package/dist/react/index.js

@@ -90,9 +90,7 @@ function SnapLoadingOverlay({ appearance, accentHex, active, }) {
             zIndex: 10,
             background: tint,
             backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
-            WebkitBackdropFilter: active
-                ? "blur(10px) saturate(1.05)"
-                : "none",
+            WebkitBackdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
             opacity: active ? 1 : 0,
             pointerEvents: active ? "auto" : "none",
             transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
@@ -182,7 +180,9 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 handlers.submit(String(p.target ?? ""), inputs);
                 break;
             case "open_url":
-                handlers.open_url(String(p.target ?? ""));
+                handlers.open_url(String(p.target ?? ""), {
+                    isSnap: p.isSnap === true,
+                });
                 break;
             case "open_mini_app":
                 handlers.open_mini_app(String(p.target ?? ""));
@@ -225,7 +225,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiEpochRef.current), _jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && (_jsx(ConfettiOverlay, {}, `confetti-${confettiEpochRef.current}`)), _jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                             applyStatePaths(stateRef.current, changes);
                         }, onAction: handleAction }, pageKey) }) })] }));
 }

package/dist/react-native/components/snap-action-button.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
-export declare function SnapActionButton({ element: { props }, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;
+export declare function SnapActionButton({ element, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

package/dist/react-native/components/snap-action-button.js

@@ -1,17 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { ExternalLink } from "lucide-react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { ICON_MAP } from "./snap-icon.js";
-export function SnapActionButton({ element: { props }, emit, }) {
+function isExternalLinkAction(on) {
+    if (!on)
+        return false;
+    const press = on.press;
+    if (!press || press.action !== "open_url")
+        return false;
+    return press.params?.isSnap !== true;
+}
+export function SnapActionButton({ element, emit, }) {
     const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
+    const { props } = element;
     const label = String(props.label ?? "Action");
     const variant = String(props.variant ?? "secondary");
     const isPrimary = variant === "primary";
     const iconName = props.icon ? String(props.icon) : undefined;
     const textColor = isPrimary ? "#fff" : colors.text;
     const iconColor = isPrimary ? "#fff" : colors.text;
+    const on = element.on;
+    const showExternalIcon = isExternalLinkAction(on);
     return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
                 isPrimary ? styles.btnDefault : styles.btnOther,
@@ -30,7 +42,12 @@ export function SnapActionButton({ element: { props }, emit, }) {
                         }
                     }
                 })();
-            }, children: [iconName && ICON_MAP[iconName] ? ((() => { const I = ICON_MAP[iconName]; return _jsx(I, { size: 16, color: iconColor }); })()) : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label })] }) }));
+            }, children: [iconName && ICON_MAP[iconName]
+                    ? (() => {
+                        const I = ICON_MAP[iconName];
+                        return _jsx(I, { size: 16, color: iconColor });
+                    })()
+                    : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
 }
 const styles = StyleSheet.create({
     outer: { flex: 1, minWidth: 0 },

package/dist/react-native/index.d.ts

@@ -14,7 +14,9 @@ export type SnapPage = {
 };
 export type SnapActionHandlers = {
     submit: (target: string, inputs: Record<string, JsonValue>) => void;
-    open_url: (target: string) => void;
+    open_url: (target: string, options?: {
+        isSnap?: boolean;
+    }) => void;
     open_mini_app: (target: string) => void;
     view_cast: (params: {
         hash: string;

package/dist/react-native/index.js

@@ -103,7 +103,9 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
                 h.submit(String(p.target ?? ""), inputs);
                 break;
             case "open_url":
-                h.open_url(String(p.target ?? ""));
+                h.open_url(String(p.target ?? ""), {
+                    isSnap: p.isSnap === true,
+                });
                 break;
             case "open_mini_app":
                 h.open_mini_app(String(p.target ?? ""));
@@ -149,7 +151,7 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
                     {
                         backgroundColor: mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
                     },
-                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, showConfetti ? _jsx(ConfettiOverlay, {}, confettiEpochRef.current) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, showConfetti ? (_jsx(ConfettiOverlay, {}, `confetti-${confettiEpochRef.current}`)) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);
                 }, onAction: handleAction }, pageKey)] }));
 }

package/dist/ui/catalog.d.ts

@@ -413,6 +413,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
             description: string;
             params: z.ZodObject<{
                 target: z.ZodString;
+                isSnap: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
         };
         open_mini_app: {

package/dist/ui/catalog.js

@@ -99,8 +99,11 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open target URL in the system browser.",
-            params: z.object({ target: z.string() }),
+            description: "Open target snap or external URL.",
+            params: z.object({
+                target: z.string(),
+                isSnap: z.boolean().optional(),
+            }),
         },
         open_mini_app: {
             description: "Open target URL as a Farcaster mini app.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.15.2",
+  "version": "1.15.4",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/components/action-button.tsx

@@ -1,18 +1,34 @@
 "use client";
 
 import { useState } from "react";
+import { ExternalLink } from "lucide-react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
+function isExternalLinkAction(
+  on: Record<string, unknown> | undefined,
+): boolean {
+  if (!on) return false;
+  const press = on.press as
+    | { action?: string; params?: Record<string, unknown> }
+    | undefined;
+  if (!press || press.action !== "open_url") return false;
+  return press.params?.isSnap !== true;
+}
+
 export function SnapActionButton({
-  element: { props },
+  element,
   emit,
 }: {
-  element: { props: Record<string, unknown> };
+  element: {
+    props: Record<string, unknown>;
+    on?: Record<string, unknown>;
+  };
   emit: (name: string) => void;
 }) {
+  const { props } = element;
   const label = String(props.label ?? "Action");
   const variant = String(props.variant ?? "secondary");
   const isPrimary = variant === "primary";
@@ -21,6 +37,7 @@ export function SnapActionButton({
   const [hovered, setHovered] = useState(false);
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
+  const showExternalIcon = isExternalLinkAction(element.on);
 
   const style = isPrimary
     ? {
@@ -29,7 +46,9 @@ export function SnapActionButton({
         borderColor: "transparent",
       }
     : {
-        backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+        backgroundColor: hovered
+          ? `color-mix(in srgb, ${colors.accent} 15%, transparent)`
+          : colors.muted,
         color: colors.text,
         borderColor: "transparent",
       };
@@ -47,6 +66,9 @@ export function SnapActionButton({
       >
         {Icon && <Icon size={16} />}
         {label}
+        {showExternalIcon && (
+          <ExternalLink size={14} style={{ opacity: 0.6 }} />
+        )}
       </Button>
     </div>
   );

package/src/react/index.tsx

@@ -34,7 +34,7 @@ export type SnapPage = {
 
 export type SnapActionHandlers = {
   submit: (target: string, inputs: Record<string, JsonValue>) => void;
-  open_url: (target: string) => void;
+  open_url: (target: string, options?: { isSnap?: boolean }) => void;
   open_mini_app: (target: string) => void;
   view_cast: (params: { hash: string }) => void;
   view_profile: (params: { fid: number }) => void;
@@ -174,9 +174,7 @@ function SnapLoadingOverlay({
         zIndex: 10,
         background: tint,
         backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
-        WebkitBackdropFilter: active
-          ? "blur(10px) saturate(1.05)"
-          : "none",
+        WebkitBackdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
         opacity: active ? 1 : 0,
         pointerEvents: active ? "auto" : "none",
         transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
@@ -308,7 +306,9 @@ export function SnapView({
           handlers.submit(String(p.target ?? ""), inputs);
           break;
         case "open_url":
-          handlers.open_url(String(p.target ?? ""));
+          handlers.open_url(String(p.target ?? ""), {
+            isSnap: p.isSnap === true,
+          });
           break;
         case "open_mini_app":
           handlers.open_mini_app(String(p.target ?? ""));
@@ -356,7 +356,9 @@ export function SnapView({
 
   return (
     <div style={{ position: "relative", width: "100%" }}>
-      {showConfetti && <ConfettiOverlay key={confettiEpochRef.current} />}
+      {showConfetti && (
+        <ConfettiOverlay key={`confetti-${confettiEpochRef.current}`} />
+      )}
       <SnapLoadingOverlay
         appearance={appearance}
         accentHex={accentHex}

package/src/react-native/components/snap-action-button.tsx

@@ -2,16 +2,29 @@ declare const __DEV__: boolean;
 
 import type { ComponentRenderProps } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { ExternalLink } from "lucide-react-native";
 import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
 import { ICON_MAP } from "./snap-icon";
 
+function isExternalLinkAction(
+  on: Record<string, unknown> | undefined,
+): boolean {
+  if (!on) return false;
+  const press = on.press as
+    | { action?: string; params?: Record<string, unknown> }
+    | undefined;
+  if (!press || press.action !== "open_url") return false;
+  return press.params?.isSnap !== true;
+}
+
 export function SnapActionButton({
-  element: { props },
+  element,
   emit,
 }: ComponentRenderProps<Record<string, unknown>>) {
   const { accentHex } = useSnapPalette();
   const { colors } = useSnapTheme();
+  const { props } = element;
   const label = String(props.label ?? "Action");
   const variant = String(props.variant ?? "secondary");
   const isPrimary = variant === "primary";
@@ -20,6 +33,9 @@ export function SnapActionButton({
   const textColor = isPrimary ? "#fff" : colors.text;
   const iconColor = isPrimary ? "#fff" : colors.text;
 
+  const on = (element as unknown as { on?: Record<string, unknown> }).on;
+  const showExternalIcon = isExternalLinkAction(on);
+
   return (
     <View style={styles.outer}>
       <Pressable
@@ -43,12 +59,18 @@ export function SnapActionButton({
           })();
         }}
       >
-        {iconName && ICON_MAP[iconName] ? (
-          (() => { const I = ICON_MAP[iconName]!; return <I size={16} color={iconColor} />; })()
-        ) : null}
+        {iconName && ICON_MAP[iconName]
+          ? (() => {
+              const I = ICON_MAP[iconName]!;
+              return <I size={16} color={iconColor} />;
+            })()
+          : null}
         <Text style={{ color: textColor, fontSize: 14, fontWeight: "600" }}>
           {label}
         </Text>
+        {showExternalIcon ? (
+          <ExternalLink size={14} color={iconColor} style={{ opacity: 0.6 }} />
+        ) : null}
       </Pressable>
     </View>
   );

package/src/react-native/index.tsx

@@ -36,7 +36,7 @@ export type SnapPage = {
 
 export type SnapActionHandlers = {
   submit: (target: string, inputs: Record<string, JsonValue>) => void;
-  open_url: (target: string) => void;
+  open_url: (target: string, options?: { isSnap?: boolean }) => void;
   open_mini_app: (target: string) => void;
   view_cast: (params: { hash: string }) => void;
   view_profile: (params: { fid: number }) => void;
@@ -184,7 +184,9 @@ function SnapViewInner({
         h.submit(String(p.target ?? ""), inputs);
         break;
       case "open_url":
-        h.open_url(String(p.target ?? ""));
+        h.open_url(String(p.target ?? ""), {
+          isSnap: p.isSnap === true,
+        });
         break;
       case "open_mini_app":
         h.open_mini_app(String(p.target ?? ""));
@@ -241,7 +243,9 @@ function SnapViewInner({
           <ActivityIndicator size="large" color={accentHex} />
         </View>
       ) : null}
-      {showConfetti ? <ConfettiOverlay key={confettiEpochRef.current} /> : null}
+      {showConfetti ? (
+        <ConfettiOverlay key={`confetti-${confettiEpochRef.current}`} />
+      ) : null}
       <SnapCatalogView
         key={pageKey}
         spec={spec}

package/src/ui/catalog.ts

@@ -117,8 +117,11 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       params: z.object({ target: z.string() }),
     },
     open_url: {
-      description: "Open target URL in the system browser.",
-      params: z.object({ target: z.string() }),
+      description: "Open target snap or external URL.",
+      params: z.object({
+        target: z.string(),
+        isSnap: z.boolean().optional(),
+      }),
     },
     open_mini_app: {
       description: "Open target URL as a Farcaster mini app.",