@farcaster/snap 1.16.3 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.d.ts +3 -1
- package/dist/react/index.js +3 -3
- package/dist/react/v1/snap-view.d.ts +2 -1
- package/dist/react/v1/snap-view.js +9 -3
- package/dist/react/v2/snap-view.d.ts +2 -1
- package/dist/react/v2/snap-view.js +36 -29
- package/package.json +1 -1
- package/src/react/index.tsx +5 -0
- package/src/react/v1/snap-view.tsx +16 -0
- package/src/react/v2/snap-view.tsx +19 -0
package/dist/react/index.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export type SnapActionHandlers = {
|
|
|
41
41
|
buyToken?: string;
|
|
42
42
|
}) => void;
|
|
43
43
|
};
|
|
44
|
-
export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, }: {
|
|
44
|
+
export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
|
|
45
45
|
snap: SnapPage;
|
|
46
46
|
handlers: SnapActionHandlers;
|
|
47
47
|
loading?: boolean;
|
|
@@ -51,4 +51,6 @@ export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth
|
|
|
51
51
|
showOverflowWarning?: boolean;
|
|
52
52
|
onValidationError?: (result: ValidationResult) => void;
|
|
53
53
|
validationErrorFallback?: ReactNode;
|
|
54
|
+
/** Server-side action error message to display inline. */
|
|
55
|
+
actionError?: string | null;
|
|
54
56
|
}): import("react/jsx-runtime").JSX.Element;
|
package/dist/react/index.js
CHANGED
|
@@ -4,9 +4,9 @@ import { SPEC_VERSION_2 } from "../constants.js";
|
|
|
4
4
|
import { SnapCardV1 } from "./v1/snap-view.js";
|
|
5
5
|
import { SnapCardV2 } from "./v2/snap-view.js";
|
|
6
6
|
// ─── SnapCard ────────────────────────────────────────
|
|
7
|
-
export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, }) {
|
|
7
|
+
export function SnapCard({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
|
|
8
8
|
if (snap.version === SPEC_VERSION_2) {
|
|
9
|
-
return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
|
|
9
|
+
return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError }));
|
|
10
10
|
}
|
|
11
|
-
return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth }));
|
|
11
|
+
return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, maxWidth: maxWidth, actionError: actionError }));
|
|
12
12
|
}
|
|
@@ -5,10 +5,11 @@ export declare function SnapViewV1({ snap, handlers, loading, appearance, }: {
|
|
|
5
5
|
loading?: boolean;
|
|
6
6
|
appearance?: "light" | "dark";
|
|
7
7
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, }: {
|
|
8
|
+
export declare function SnapCardV1({ snap, handlers, loading, appearance, maxWidth, actionError, }: {
|
|
9
9
|
snap: SnapPage;
|
|
10
10
|
handlers: SnapActionHandlers;
|
|
11
11
|
loading?: boolean;
|
|
12
12
|
appearance?: "light" | "dark";
|
|
13
13
|
maxWidth?: number;
|
|
14
|
+
actionError?: string | null;
|
|
14
15
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { SnapViewCore } from "../snap-view-core.js";
|
|
4
4
|
export function SnapViewV1({ snap, handlers, loading = false, appearance = "dark", }) {
|
|
5
5
|
return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
|
|
6
6
|
}
|
|
7
|
-
export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, }) {
|
|
8
|
-
return (
|
|
7
|
+
export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, actionError, }) {
|
|
8
|
+
return (_jsxs("div", { style: { position: "relative", width: "100%", maxWidth }, children: [_jsx(SnapViewV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }), actionError && (_jsx("div", { style: {
|
|
9
|
+
padding: "8px 12px",
|
|
10
|
+
fontSize: 13,
|
|
11
|
+
color: appearance === "dark"
|
|
12
|
+
? "rgba(255,100,100,0.9)"
|
|
13
|
+
: "rgba(200,0,0,0.8)",
|
|
14
|
+
}, children: actionError }))] }));
|
|
9
15
|
}
|
|
@@ -9,7 +9,7 @@ export declare function SnapViewV2({ snap, handlers, loading, appearance, onVali
|
|
|
9
9
|
onValidationError?: (result: ValidationResult) => void;
|
|
10
10
|
validationErrorFallback?: ReactNode;
|
|
11
11
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
-
export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, }: {
|
|
12
|
+
export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, }: {
|
|
13
13
|
snap: SnapPage;
|
|
14
14
|
handlers: SnapActionHandlers;
|
|
15
15
|
loading?: boolean;
|
|
@@ -18,4 +18,5 @@ export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWid
|
|
|
18
18
|
showOverflowWarning?: boolean;
|
|
19
19
|
onValidationError?: (result: ValidationResult) => void;
|
|
20
20
|
validationErrorFallback?: ReactNode;
|
|
21
|
+
actionError?: string | null;
|
|
21
22
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -42,35 +42,42 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
|
|
|
42
42
|
return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
|
|
43
43
|
}
|
|
44
44
|
// ─── SnapCardV2 ──────────────────────────────────────
|
|
45
|
-
export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, }) {
|
|
45
|
+
export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
|
|
46
46
|
const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
|
|
47
47
|
const bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
|
|
48
|
-
return (_jsxs("div", { style: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
48
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
|
|
49
|
+
position: "relative",
|
|
50
|
+
width: "100%",
|
|
51
|
+
maxWidth,
|
|
52
|
+
maxHeight,
|
|
53
|
+
overflow: "hidden",
|
|
54
|
+
}, children: [_jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }), showOverflowWarning && (_jsxs("div", { style: {
|
|
55
|
+
position: "absolute",
|
|
56
|
+
top: SNAP_MAX_HEIGHT,
|
|
57
|
+
left: 0,
|
|
58
|
+
right: 0,
|
|
59
|
+
bottom: 0,
|
|
60
|
+
pointerEvents: "none",
|
|
61
|
+
zIndex: 10,
|
|
62
|
+
}, children: [_jsx("div", { style: { borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }, children: _jsxs("span", { style: {
|
|
63
|
+
position: "absolute",
|
|
64
|
+
top: -10,
|
|
65
|
+
right: 0,
|
|
66
|
+
fontSize: 10,
|
|
67
|
+
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
68
|
+
color: "rgba(255,100,100,0.7)",
|
|
69
|
+
background: bg,
|
|
70
|
+
padding: "1px 4px",
|
|
71
|
+
borderRadius: 3,
|
|
72
|
+
}, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx("div", { style: {
|
|
73
|
+
height: "100%",
|
|
74
|
+
background: "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
|
|
75
|
+
} })] }))] }), actionError && (_jsx("div", { style: {
|
|
76
|
+
maxWidth,
|
|
77
|
+
padding: "8px 12px",
|
|
78
|
+
fontSize: 13,
|
|
79
|
+
color: appearance === "dark"
|
|
80
|
+
? "rgba(255,100,100,0.9)"
|
|
81
|
+
: "rgba(200,0,0,0.8)",
|
|
82
|
+
}, children: actionError }))] }));
|
|
76
83
|
}
|
package/package.json
CHANGED
package/src/react/index.tsx
CHANGED
|
@@ -56,6 +56,7 @@ export function SnapCard({
|
|
|
56
56
|
showOverflowWarning = false,
|
|
57
57
|
onValidationError,
|
|
58
58
|
validationErrorFallback,
|
|
59
|
+
actionError,
|
|
59
60
|
}: {
|
|
60
61
|
snap: SnapPage;
|
|
61
62
|
handlers: SnapActionHandlers;
|
|
@@ -66,6 +67,8 @@ export function SnapCard({
|
|
|
66
67
|
showOverflowWarning?: boolean;
|
|
67
68
|
onValidationError?: (result: ValidationResult) => void;
|
|
68
69
|
validationErrorFallback?: ReactNode;
|
|
70
|
+
/** Server-side action error message to display inline. */
|
|
71
|
+
actionError?: string | null;
|
|
69
72
|
}) {
|
|
70
73
|
if (snap.version === SPEC_VERSION_2) {
|
|
71
74
|
return (
|
|
@@ -78,6 +81,7 @@ export function SnapCard({
|
|
|
78
81
|
showOverflowWarning={showOverflowWarning}
|
|
79
82
|
onValidationError={onValidationError}
|
|
80
83
|
validationErrorFallback={validationErrorFallback}
|
|
84
|
+
actionError={actionError}
|
|
81
85
|
/>
|
|
82
86
|
);
|
|
83
87
|
}
|
|
@@ -89,6 +93,7 @@ export function SnapCard({
|
|
|
89
93
|
loading={loading}
|
|
90
94
|
appearance={appearance}
|
|
91
95
|
maxWidth={maxWidth}
|
|
96
|
+
actionError={actionError}
|
|
92
97
|
/>
|
|
93
98
|
);
|
|
94
99
|
}
|
|
@@ -30,12 +30,14 @@ export function SnapCardV1({
|
|
|
30
30
|
loading = false,
|
|
31
31
|
appearance = "dark",
|
|
32
32
|
maxWidth = 480,
|
|
33
|
+
actionError,
|
|
33
34
|
}: {
|
|
34
35
|
snap: SnapPage;
|
|
35
36
|
handlers: SnapActionHandlers;
|
|
36
37
|
loading?: boolean;
|
|
37
38
|
appearance?: "light" | "dark";
|
|
38
39
|
maxWidth?: number;
|
|
40
|
+
actionError?: string | null;
|
|
39
41
|
}) {
|
|
40
42
|
return (
|
|
41
43
|
<div style={{ position: "relative", width: "100%", maxWidth }}>
|
|
@@ -45,6 +47,20 @@ export function SnapCardV1({
|
|
|
45
47
|
loading={loading}
|
|
46
48
|
appearance={appearance}
|
|
47
49
|
/>
|
|
50
|
+
{actionError && (
|
|
51
|
+
<div
|
|
52
|
+
style={{
|
|
53
|
+
padding: "8px 12px",
|
|
54
|
+
fontSize: 13,
|
|
55
|
+
color:
|
|
56
|
+
appearance === "dark"
|
|
57
|
+
? "rgba(255,100,100,0.9)"
|
|
58
|
+
: "rgba(200,0,0,0.8)",
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
{actionError}
|
|
62
|
+
</div>
|
|
63
|
+
)}
|
|
48
64
|
</div>
|
|
49
65
|
);
|
|
50
66
|
}
|
|
@@ -94,6 +94,7 @@ export function SnapCardV2({
|
|
|
94
94
|
showOverflowWarning = false,
|
|
95
95
|
onValidationError,
|
|
96
96
|
validationErrorFallback,
|
|
97
|
+
actionError,
|
|
97
98
|
}: {
|
|
98
99
|
snap: SnapPage;
|
|
99
100
|
handlers: SnapActionHandlers;
|
|
@@ -103,11 +104,13 @@ export function SnapCardV2({
|
|
|
103
104
|
showOverflowWarning?: boolean;
|
|
104
105
|
onValidationError?: (result: ValidationResult) => void;
|
|
105
106
|
validationErrorFallback?: ReactNode;
|
|
107
|
+
actionError?: string | null;
|
|
106
108
|
}) {
|
|
107
109
|
const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
|
|
108
110
|
const bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
|
|
109
111
|
|
|
110
112
|
return (
|
|
113
|
+
<>
|
|
111
114
|
<div
|
|
112
115
|
style={{
|
|
113
116
|
position: "relative",
|
|
@@ -164,5 +167,21 @@ export function SnapCardV2({
|
|
|
164
167
|
</div>
|
|
165
168
|
)}
|
|
166
169
|
</div>
|
|
170
|
+
{actionError && (
|
|
171
|
+
<div
|
|
172
|
+
style={{
|
|
173
|
+
maxWidth,
|
|
174
|
+
padding: "8px 12px",
|
|
175
|
+
fontSize: 13,
|
|
176
|
+
color:
|
|
177
|
+
appearance === "dark"
|
|
178
|
+
? "rgba(255,100,100,0.9)"
|
|
179
|
+
: "rgba(200,0,0,0.8)",
|
|
180
|
+
}}
|
|
181
|
+
>
|
|
182
|
+
{actionError}
|
|
183
|
+
</div>
|
|
184
|
+
)}
|
|
185
|
+
</>
|
|
167
186
|
);
|
|
168
187
|
}
|