Handle and display real-time events from the host

This commit is contained in:
Christian Mladenov 2024-12-17 18:11:42 -08:00 committed by lucas-neynar
parent 577c2b5900
commit 0474228955
No known key found for this signature in database
3 changed files with 89 additions and 60 deletions

View File

@ -10,10 +10,10 @@
},
"dependencies": {
"@farcaster/auth-kit": "^0.6.0",
"@farcaster/frame-core": "^0.0.18",
"@farcaster/frame-node": "^0.0.3",
"@farcaster/frame-sdk": "^0.0.19",
"@farcaster/frame-wagmi-connector": "^0.0.1",
"@farcaster/frame-core": "^0.0.19",
"@farcaster/frame-node": "^0.0.7",
"@farcaster/frame-sdk": "^0.0.20",
"@farcaster/frame-wagmi-connector": "^0.0.6",
"@tanstack/react-query": "^5.61.0",
"@upstash/redis": "^1.34.3",
"next": "15.0.3",

View File

@ -33,9 +33,14 @@ export default function Demo(
const [context, setContext] = useState<FrameContext>();
const [isContextOpen, setIsContextOpen] = useState(false);
const [txHash, setTxHash] = useState<string | null>(null);
const [addFrameResult, setAddFrameResult] = useState("");
const [added, setAdded] = useState(false);
const [notificationDetails, setNotificationDetails] =
useState<FrameNotificationDetails | null>(null);
const [lastEvent, setLastEvent] = useState("");
const [addFrameResult, setAddFrameResult] = useState("");
const [sendNotificationResult, setSendNotificationResult] = useState("");
useEffect(() => {
@ -80,12 +85,52 @@ export default function Demo(
useEffect(() => {
const load = async () => {
setContext(await sdk.context);
const context = await sdk.context;
setContext(context);
setAdded(context.client.added);
sdk.on("frameAdded", ({ notificationDetails }) => {
setLastEvent(
`frameAdded${!!notificationDetails ? ", notifications enabled" : ""}`
);
setAdded(true);
if (notificationDetails) {
setNotificationDetails(notificationDetails);
}
});
sdk.on("frameAddRejected", ({ reason }) => {
setLastEvent(`frameAddRejected, reason ${reason}`);
});
sdk.on("frameRemoved", () => {
setLastEvent("frameRemoved");
setAdded(false);
setNotificationDetails(null);
});
sdk.on("notificationsEnabled", ({ notificationDetails }) => {
setLastEvent("notificationsEnabled");
setNotificationDetails(notificationDetails);
});
sdk.on("notificationsDisabled", () => {
setLastEvent("notificationsDisabled");
setNotificationDetails(null);
});
sdk.on("primaryButtonClicked", () => {
console.log("primaryButtonClicked");
});
sdk.actions.ready({});
};
if (sdk && !isSDKLoaded) {
setIsSDKLoaded(true);
load();
return () => {
sdk.removeAllListeners();
};
}
}, [isSDKLoaded]);
@ -265,14 +310,22 @@ export default function Demo(
</div>
</div>
<div className="mb-4">
<h2 className="font-2xl font-bold">Last event</h2>
<div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
{lastEvent || "none"}
</pre>
</div>
</div>
<div>
<h2 className="font-2xl font-bold">Add to client & notifications</h2>
<div className="mt-2 mb-4 text-sm">
Client fid {context?.client.clientFid},
{context?.client.added
? " frame added to client,"
: " frame not added to client,"}
{added ? " frame added to client," : " frame not added to client,"}
{notificationDetails
? " notifications enabled"
: " notifications disabled"}
@ -289,7 +342,7 @@ export default function Demo(
Add frame result: {addFrameResult}
</div>
)}
<Button onClick={addFrame} disabled={context?.client.added}>
<Button onClick={addFrame} disabled={added}>
Add frame to client
</Button>
</div>

View File

@ -134,44 +134,36 @@
qrcode "^1.5.3"
react-remove-scroll "^2.5.7"
"@farcaster/frame-core@^0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@farcaster/frame-core/-/frame-core-0.0.15.tgz#05a4ed6f7c0d43d2f41d13714fb8b13419068a11"
integrity sha512-WQfAEqyQAz3EzEdfqAMV7s2VMIYBGWz0Qt5CUUkmSelvv0a+8A61YmBnpemCi3NEwWzEJBTc/IxzQ29w2axPBg==
dependencies:
ox "^0.4.0"
zod "^3.23.8"
"@farcaster/frame-core@^0.0.18":
version "0.0.18"
resolved "https://registry.yarnpkg.com/@farcaster/frame-core/-/frame-core-0.0.18.tgz#c6e5e13d63350ef9ec728b37d13c6fcefd19bc44"
integrity sha512-up01bcs5cLxgCiL7keqHVROVX5WS0waTrvSyrEXv92jSh0KosvU6OsxI1gS+6wtwqGP4KdPB0+7VmYydQaVzKQ==
dependencies:
ox "^0.4.0"
zod "^3.23.8"
"@farcaster/frame-node@^0.0.3":
version "0.0.3"
resolved "https://registry.yarnpkg.com/@farcaster/frame-node/-/frame-node-0.0.3.tgz#4502694fef336cefd56b1aa5642128844ac62668"
integrity sha512-ReZvQozIXn1pwAn56/5ms54Gw+jwWP6TW+rmlvaX4hDi7pJATnHJvwZ/nZw8yj2GsWPNr2DxUJlC0Zt0UORN/Q==
dependencies:
"@farcaster/frame-core" "^0.0.15"
ox "^0.4.0"
"@farcaster/frame-sdk@^0.0.19":
"@farcaster/frame-core@^0.0.19":
version "0.0.19"
resolved "https://registry.yarnpkg.com/@farcaster/frame-sdk/-/frame-sdk-0.0.19.tgz#46a8e7e4184eec3052b804a949b6228b4cf5181c"
integrity sha512-JnUUtZNOH73essJGrNXeUKGHdKTP3z/7ykHWxGFwVy3KzXMucVTjwHMsgk5mWj92QFuxVd3wIlCppW8z+Nohxg==
resolved "https://registry.yarnpkg.com/@farcaster/frame-core/-/frame-core-0.0.19.tgz#76621fe6e207c3a5c78a22aa679bbbd7beafdd11"
integrity sha512-/0XjVZa/rUuUR16GVhhKnAQI33SXI61bB24jNA1DD0L0ytcKsM14wBptW9CF4RDiYIXxtt4mXmnQ+rMhO38RcA==
dependencies:
"@farcaster/frame-core" "^0.0.18"
ox "^0.4.0"
zod "^3.23.8"
"@farcaster/frame-node@^0.0.7":
version "0.0.7"
resolved "https://registry.yarnpkg.com/@farcaster/frame-node/-/frame-node-0.0.7.tgz#cebbafa2f7def65c0800bdcca47ce86096e4bb4c"
integrity sha512-jhQI3p6gJGKm+3LknShQmC/oVRw8DHq/y2RI6PttFTTBK3OJhxbldLsqUAdIPicjUYUOnoW6tvT/3ToYPyyysA==
dependencies:
"@farcaster/frame-core" "^0.0.19"
ox "^0.4.0"
"@farcaster/frame-sdk@^0.0.20":
version "0.0.20"
resolved "https://registry.yarnpkg.com/@farcaster/frame-sdk/-/frame-sdk-0.0.20.tgz#253dba9a1aba23c63e01617720835fe6b2b0880b"
integrity sha512-9EbB3A9V1ZSH4NvhHVbylcDVNevJqpuGkwz4I+0bKF2936qxvMlcWclDZVEmfO/woYH0ZQgy47YYRIiS3YpIQw==
dependencies:
"@farcaster/frame-core" "^0.0.19"
comlink "^4.4.2"
eventemitter3 "^5.0.1"
ox "^0.4.0"
"@farcaster/frame-wagmi-connector@^0.0.1":
version "0.0.1"
resolved "https://registry.yarnpkg.com/@farcaster/frame-wagmi-connector/-/frame-wagmi-connector-0.0.1.tgz#415324d2d8c233aa56befe4e2c5ec71714f5aa5b"
integrity sha512-baFIrhHKrd0PEm/j6BY3vSXazkd95nzuY5e6+5mmZoGRU3LEc4PZHZ2b2tAnxW7tS5A6jEK8NsS/QkrYi4/BLQ==
"@farcaster/frame-wagmi-connector@^0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@farcaster/frame-wagmi-connector/-/frame-wagmi-connector-0.0.6.tgz#a67cec6cfcbaa8e15de70ce3d0f2a5c01cc07638"
integrity sha512-5Ta8vDs6cJygvg9cs20E29bJZcLWPQRSaUyHuLt+biA1YHbRkzRNr/tDmBd1DV/Y59OXIaNdyBxXb6NNX7wung==
"@humanwhocodes/config-array@^0.13.0":
version "0.13.0"
@ -4846,16 +4838,7 @@ strict-uri-encode@^2.0.0:
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
string-width@^4.1.0, string-width@^4.2.0:
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -4950,14 +4933,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==