Skip to content

Commit e723d30

Browse files
michalkvasnicakmichalkvasnicak
committed
chore: integrate farcaster implementation of frames v2
1 parent e4f0a05 commit e723d30

26 files changed

+971
-1943
lines changed

‎packages/debugger/app/components/frame-app-debugger-notifications.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export function FrameAppDebuggerNotifications({
131131
);
132132
}
133133

134-
if (!frame.manifest.manifest.frame.webhookUrl) {
134+
if (!frame.manifest.manifest.frame?.webhookUrl) {
135135
return (
136136
<>
137137
<Alert variant="destructive">

‎packages/debugger/app/components/frame-app-debugger.tsx

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import type { FrameLaunchedInContext } from "./frame-debugger";
33
import { WithTooltip } from "./with-tooltip";
44
import { Loader2Icon, RefreshCwIcon } from "lucide-react";
55
import { Card, CardContent } from "@/components/ui/card";
6-
import {
7-
type FramePrimaryButton,
8-
type ResolveClientFunction,
9-
useFrameAppInIframe,
10-
} from "@frames.js/render/use-frame-app";
6+
import { useFrameAppInIframe } from "@frames.js/render/frame-app/iframe";
117
import { useCallback, useRef, useState } from "react";
128
import { useWagmiProvider } from "@frames.js/render/frame-app/provider/wagmi";
139
import { useToast } from "@/components/ui/use-toast";
@@ -22,12 +18,18 @@ import {
2218
FrameAppNotificationsManagerProvider,
2319
useFrameAppNotificationsManager,
2420
} from "../providers/FrameAppNotificationsManagerProvider";
21+
import { ToastAction } from "@/components/ui/toast";
22+
import type {
23+
FramePrimaryButton,
24+
ResolveClientFunction,
25+
} from "@frames.js/render/frame-app/types";
2526

2627
type TabValues = "events" | "console" | "notifications";
2728

2829
type FrameAppDebuggerProps = {
2930
context: FrameLaunchedInContext;
3031
farcasterSigner: FarcasterSignerInstance;
32+
onClose: () => void;
3133
};
3234

3335
// in debugger we don't want to automatically reject repeated add frame calls
@@ -48,6 +50,7 @@ const addFrameRequestsCache = new (class extends Set {
4850
export function FrameAppDebugger({
4951
context,
5052
farcasterSigner,
53+
onClose,
5154
}: FrameAppDebuggerProps) {
5255
const farcasterSignerRef = useRef(farcasterSigner);
5356
farcasterSignerRef.current = farcasterSigner;
@@ -57,14 +60,16 @@ export function FrameAppDebugger({
5760
});
5861
const { toast } = useToast();
5962
const debuggerConsoleTabRef = useRef<HTMLDivElement>(null);
60-
const iframeRef = useRef<HTMLIFrameElement>(null);
63+
const iframeRef = useRef<HTMLIFrameElement | null>(null);
6164
const [activeTab, setActiveTab] = useState<TabValues>("notifications");
6265
const [isAppReady, setIsAppReady] = useState(false);
6366
const [primaryButton, setPrimaryButton] = useState<{
6467
button: FramePrimaryButton;
6568
callback: () => void;
6669
} | null>(null);
67-
const provider = useWagmiProvider();
70+
const provider = useWagmiProvider({
71+
debug: true,
72+
});
6873
const resolveClient: ResolveClientFunction = useCallback(async () => {
6974
try {
7075
const { manager } = await frameAppNotificationManager.promise;
@@ -124,7 +129,18 @@ export function FrameAppDebugger({
124129
console.info("sdk.actions.close() called");
125130
toast({
126131
title: "Frame app closed",
127-
description: "The frame app called close() action.",
132+
description:
133+
"The frame app called close() action. Would you like to close it?",
134+
action: (
135+
<ToastAction
136+
altText="Close"
137+
onClick={() => {
138+
onClose();
139+
}}
140+
>
141+
Close
142+
</ToastAction>
143+
),
128144
});
129145
},
130146
onOpenUrl(url) {
@@ -210,9 +226,6 @@ export function FrameAppDebugger({
210226
throw e;
211227
}
212228
},
213-
onDebugEthProviderRequest(parameters) {
214-
console.info("sdk.wallet.ethProvider.request() called", { parameters });
215-
},
216229
});
217230

218231
return (
@@ -253,29 +266,34 @@ export function FrameAppDebugger({
253266
context.frame.button.action.splashBackgroundColor,
254267
}}
255268
>
256-
<div className="w-[200px] h-[200px] relative">
257-
<Image
258-
alt={`${name} splash image`}
259-
src={context.frame.button.action.splashImageUrl}
260-
width={200}
261-
height={200}
262-
/>
263-
<div className="absolute bottom-0 right-0">
264-
<Loader2Icon
265-
className="animate-spin text-primary"
266-
size={40}
269+
{context.frame.button.action.splashImageUrl && (
270+
<div className="w-[200px] h-[200px] relative">
271+
<Image
272+
alt={`${name} splash image`}
273+
src={context.frame.button.action.splashImageUrl}
274+
width={200}
275+
height={200}
267276
/>
277+
<div className="absolute bottom-0 right-0">
278+
<Loader2Icon
279+
className="animate-spin text-primary"
280+
size={40}
281+
/>
282+
</div>
268283
</div>
269-
</div>
284+
)}
270285
</div>
271286
))}
272287
{frameApp.status === "success" && (
273288
<>
274289
<iframe
275290
className="flex h-full w-full border rounded-lg"
276291
sandbox="allow-forms allow-scripts allow-same-origin"
277-
ref={iframeRef}
278292
{...frameApp.iframeProps}
293+
ref={(r) => {
294+
frameApp.iframeProps.ref.current = r;
295+
iframeRef.current = r;
296+
}}
279297
/>
280298
{!!primaryButton && !primaryButton.button.hidden && (
281299
<div className="w-full py-1">

‎packages/debugger/app/components/frame-debugger.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,7 @@ import { FrameDebuggerRequestDetails } from "./frame-debugger-request-details";
3434
import { FrameUI } from "./frame-ui";
3535
import { useToast } from "@/components/ui/use-toast";
3636
import { ToastAction } from "@/components/ui/toast";
37-
import {
38-
DebuggerFrameStackItem,
39-
useDebuggerFrameState,
40-
} from "../hooks/useDebuggerFrameState";
37+
import { useDebuggerFrameState } from "../hooks/useDebuggerFrameState";
4138
import { FrameDebuggerDiagnostics } from "./frame-debugger-diagnostics";
4239
import { FrameDebuggerRequestCardContent } from "./frame-debugger-request-card-content";
4340
import { useSharedFrameEventHandlers } from "../hooks/useSharedFrameEventHandlers";
@@ -53,20 +50,21 @@ import type {
5350
import { useFrameContext } from "../providers/FrameContextProvider";
5451
import { cn } from "@/lib/utils";
5552
import { FrameDebuggerFarcasterManifestDetails } from "./frame-debugger-farcaster-manifest-details";
56-
import { Frame, TriggerConfig } from "frames.js/farcaster-v2/types";
53+
import type { Frame } from "frames.js/farcaster-v2/types";
5754

55+
// @todo uncomment once triggers are implemented upstream
5856
export type FrameLaunchedInContext =
59-
| {
57+
/* | {
6058
context: "trigger";
6159
triggerConfig: TriggerConfig;
6260
frame: Frame;
6361
parseResult: ParseFramesV2ResultWithFrameworkDetails;
64-
}
65-
| {
66-
context: "button_press";
67-
frame: Frame;
68-
parseResult: ParseFramesV2ResultWithFrameworkDetails;
69-
};
62+
}*/
63+
{
64+
context: "button_press";
65+
frame: Frame;
66+
parseResult: ParseFramesV2ResultWithFrameworkDetails;
67+
};
7068

7169
type FrameDebuggerProps = {
7270
url: string;
@@ -381,14 +379,14 @@ export const FrameDebugger = React.forwardRef<
381379
/>
382380
<div className="ml-auto text-sm text-slate-500">{url}</div>
383381

384-
{!isLoading &&
382+
{/* !isLoading &&
385383
currentFrameStackItem &&
386384
protocol.specification === "farcaster_v2" && (
387385
<FrameV2TriggerButtons
388386
onLaunchFrameButtonPressed={onFrameLaunchedInContext}
389387
stackItem={currentFrameStackItem}
390388
/>
391-
)}
389+
)*/}
392390

393391
{!isLoading && protocol.specification !== "farcaster_v2" && (
394392
<>
@@ -590,6 +588,7 @@ export const FrameDebugger = React.forwardRef<
590588

591589
FrameDebugger.displayName = "FrameDebugger";
592590

591+
/*
593592
type FrameV2TriggerButtonsProps = {
594593
stackItem: DebuggerFrameStackItem;
595594
onLaunchFrameButtonPressed: (
@@ -664,4 +663,4 @@ function FrameV2TriggerButtons({
664663
})}
665664
</div>
666665
);
667-
}
666+
}*/

‎packages/debugger/app/debugger-page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,9 @@ export default function DebuggerPage({
463463
<FrameAppDebugger
464464
context={frameV2LaunchContext}
465465
farcasterSigner={farcasterSignerState}
466+
onClose={() => {
467+
setFrameV2LaunchContext(null);
468+
}}
466469
/>
467470
)}
468471
</>

‎packages/debugger/app/notifications/[namespaceId]/events/route.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createRedis } from "../../../lib/redis";
33
import { RedisNotificationsStorage } from "../../storage";
44
import { z } from "zod";
55
import {
6-
eventPayloadSchema,
6+
serverEventSchema,
77
sendNotificationRequestSchema,
88
} from "@farcaster/frame-sdk";
99

@@ -17,18 +17,18 @@ const getEventsResponseBodySchema = z.array(
1717
z.object({
1818
id: z.string().uuid(),
1919
type: z.literal("event"),
20-
event: eventPayloadSchema,
20+
event: serverEventSchema,
2121
}),
2222
z.object({
2323
id: z.string().uuid(),
2424
type: z.literal("event_success"),
2525
eventId: z.string().uuid(),
26-
event: eventPayloadSchema,
26+
event: serverEventSchema,
2727
}),
2828
z.object({
2929
id: z.string().uuid(),
3030
type: z.literal("event_failure"),
31-
event: eventPayloadSchema,
31+
event: serverEventSchema,
3232
eventId: z.string().uuid(),
3333
message: z.string(),
3434
response: z

‎packages/debugger/app/notifications/[namespaceId]/route.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { createRedis } from "../../lib/redis";
77
import { RedisNotificationsStorage } from "../storage";
88
import { z } from "zod";
99
import {
10-
FrameEvent,
10+
FrameServerEvent,
1111
InvalidWebhookResponseError,
1212
sendEvent,
1313
} from "frames.js/farcaster-v2/events";
@@ -96,7 +96,7 @@ export async function POST(
9696
id: eventId,
9797
});
9898

99-
const event: FrameEvent = {
99+
const event: FrameServerEvent = {
100100
event: "frame_added",
101101
notificationDetails,
102102
};
@@ -144,7 +144,7 @@ export async function POST(
144144
await storage.removeFrame(namespace);
145145

146146
const eventId = crypto.randomUUID();
147-
const event: FrameEvent = {
147+
const event: FrameServerEvent = {
148148
event: "frame_removed",
149149
};
150150

@@ -205,7 +205,7 @@ export async function POST(
205205
id: eventId,
206206
});
207207

208-
const event: FrameEvent = {
208+
const event: FrameServerEvent = {
209209
event: "notifications_enabled",
210210
notificationDetails,
211211
};
@@ -261,7 +261,7 @@ export async function POST(
261261
id: eventId,
262262
});
263263

264-
const event: FrameEvent = {
264+
const event: FrameServerEvent = {
265265
event: "notifications_disabled",
266266
};
267267

‎packages/debugger/app/notifications/types.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { SendNotificationRequest } from "@farcaster/frame-sdk";
2-
import type { FrameClientConfig } from "@frames.js/render/use-frame-app";
3-
import type { FrameEvent } from "frames.js/farcaster-v2/events";
2+
import { FrameClientConfig } from "@frames.js/render/frame-app/types";
3+
import type { FrameServerEvent } from "frames.js/farcaster-v2/events";
44

55
export type Notification = SendNotificationRequest;
66

@@ -12,18 +12,18 @@ export type RecordedEvent =
1212
}
1313
| {
1414
type: "event";
15-
event: FrameEvent;
15+
event: FrameServerEvent;
1616
id: string;
1717
}
1818
| {
1919
type: "event_success";
20-
event: FrameEvent;
20+
event: FrameServerEvent;
2121
id: string;
2222
eventId: string;
2323
}
2424
| {
2525
type: "event_failure";
26-
event: FrameEvent;
26+
event: FrameServerEvent;
2727
id: string;
2828
eventId: string;
2929
message: string;

‎packages/debugger/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"dependencies": {
1919
"@upstash/redis": "^1.34.3",
2020
"@lens-protocol/client": "^2.3.2",
21-
"@farcaster/frame-sdk": "^0.0.18",
21+
"@farcaster/frame-sdk": "^0.0.20",
2222
"@xmtp/xmtp-js": "^12.0.0",
2323
"is-port-reachable": "^4.0.0",
2424
"next": "14.1.4",

‎packages/frames.js/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -419,11 +419,13 @@
419419
"react-dom": "^18.2.0"
420420
},
421421
"dependencies": {
422-
"@farcaster/frame-node": "^0.0.4",
422+
"@farcaster/frame-core": "^0.0.19",
423+
"@farcaster/frame-node": "^0.0.8",
423424
"@vercel/og": "^0.6.3",
424425
"cheerio": "^1.0.0-rc.12",
425426
"protobufjs": "^7.2.6",
426427
"viem": "^2.7.8",
427-
"type-fest": "^4.28.1"
428+
"type-fest": "^4.28.1",
429+
"zod": "^3.23.8"
428430
}
429431
}

0 commit comments

Comments
 (0)