From 047422895575ab5de53d906cd49af6ce711367ec Mon Sep 17 00:00:00 2001 From: Christian Mladenov Date: Tue, 17 Dec 2024 18:11:42 -0800 Subject: [PATCH] Handle and display real-time events from the host --- package.json | 8 ++--- src/components/Demo.tsx | 65 +++++++++++++++++++++++++++++++---- yarn.lock | 76 ++++++++++++++--------------------------- 3 files changed, 89 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index 56962ed..a5c97e7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Demo.tsx b/src/components/Demo.tsx index 63625eb..8de22ae 100644 --- a/src/components/Demo.tsx +++ b/src/components/Demo.tsx @@ -33,9 +33,14 @@ export default function Demo( const [context, setContext] = useState(); const [isContextOpen, setIsContextOpen] = useState(false); const [txHash, setTxHash] = useState(null); - const [addFrameResult, setAddFrameResult] = useState(""); + + const [added, setAdded] = useState(false); const [notificationDetails, setNotificationDetails] = useState(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( +
+

Last event

+ +
+ 
+            {lastEvent || "none"}
+
+
+
+

Add to client & notifications

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}
)} -
diff --git a/yarn.lock b/yarn.lock index 736dbc4..a243553 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==