From b35fbc7d194f2758424ba29cfde5cbee0ede179f Mon Sep 17 00:00:00 2001 From: fabri Date: Mon, 6 May 2024 14:11:11 -0700 Subject: [PATCH 1/2] update --- docs/{farhack.md => awesome.md} | 75 ++++++++++++--------------------- src/css/tailwind.css | 6 +-- 2 files changed, 29 insertions(+), 52 deletions(-) rename docs/{farhack.md => awesome.md} (80%) diff --git a/docs/farhack.md b/docs/awesome.md similarity index 80% rename from docs/farhack.md rename to docs/awesome.md index a7b23b09..3aef7ab0 100644 --- a/docs/farhack.md +++ b/docs/awesome.md @@ -1,24 +1,16 @@ --- -sidebar_label: FarHack +sidebar_label: Awesome sidebar_position: 4 description: Making Frames Interoperable --- -# FarHack +# Awesome ✨ -Welcome to the ultimate Farcaster hackathon to learn how to build innovative Frames and Bots with XMTP. Happy coding 🫡 +> 💬 **Try it:** Message `awesome.hi.xmtp.eth` -![](./build/img/farhack/farhack.png) - -## Prizes 🏆 - -
🤖 Best use of an XMTP Bot with Farcaster - $500 - -This prize goes to the team that most effectively creates a Bot that uses Farcaster in a meaningful way. - -**Requirements:** +See live examples in the [Awesome XMTP ⭐️](https://github.com/xmtp/awesome-xmtp) repo. -
Develop a Farcaster Bot using XMTP libraries +
🤖 Bots To create a new XMTP bot using [BotKit](https://github.com/xmtp/botkit) cli tool: @@ -52,19 +44,11 @@ run(async (context: HandlerContext) => {
-
- -
🖼️ Best Chat Frame - $500 - -This prize goes to the best Frame compatible with messaging apps. - -**Requirements:** - -
Integrate your Frame with XMTP +
🖼️ Frames **Metadata** -In compliance with [Open Frames](https://www.openframes.xyz/), Use a meta tag in your frame's HTML to declare the client protocols your frame supports. +In compliance with [Open Frames](https://github.com/open-frames/standard/blob/v0.0.1/README.md), Use a meta tag in your frame's HTML to declare the client protocols your frame supports. ```html @@ -89,7 +73,7 @@ export function handler(requestBody: any) { **Frameworks** -Popular frameworks have already integrated Open Frames into their stack: +Popular frameworks have already integrated Open Frames into their stacks:
OnChainKit @@ -140,7 +124,7 @@ async function getResponse(req: any): Promise { ``` - [OnChainKit](https://onchainkit.xyz/xmtp/introduction): Official OnchainKit documentation. -- [Quickstart](https://github.com/daria-github/a-frame-in-100-lines/): Onchainkit quickstart that integrates XMTP. +- [Quickstart](https://github.com/daria-github/a-frame-in-100-lines/): OnchainKit quickstart that integrates XMTP.
@@ -166,22 +150,29 @@ const acceptedProtocols: ClientProtocolId[] = [ **Validate incoming messages**: ```jsx -import { getXmtpFrameMessage, isXmtpFrameActionPayload } from "frames.js/xmtp"; - let fid: number | undefined; let walletAddress: string | undefined; -if (isXmtpFrameActionPayload(previousFrame.postBody)) { - const frameMessage = await getXmtpFrameMessage(previousFrame.postBody); - const { verifiedWalletAddress } = frameMessage; - // Do something with xmtp wallet address -} else { - // Do something else +import { + isXmtpFrameRequest, + getXmtpFrameMessage, +} from "@coinbase/onchainkit/xmtp"; +import { NextResponse } from "next/server"; +import type { FrameRequest } from "@coinbase/onchainkit"; + +async function getResponse(req: any): Promise { + const body: FrameRequest = await req.json(); + if (isXmtpFrameRequest(body)) { + const { isValid, message } = await getXmtpFrameMessage(body); + walletAddress = frameMessage?.verifiedWalletAddress; + } else { + // ... + } } ``` - [Frames.js](https://framesjs.org/reference/js/xmtp): Official Framesjs Documentation. -- [Quickstart](https://github.com/framesjs/frames.js/tree/main/templates/next-starter-with-examples/): Frames.js example that integrates XMTP. +- [Quickstart](https://github.com/framesjs/frames.js/tree/main/templates/next-starter-with-examples/): Onchainkit quickstart that integrates XMTP.
@@ -258,18 +249,10 @@ app.frame("/", (c) => {
-- Send your Frame through [Converse](https://converse.xyz/dm/hi.xmtp.eth) to `hi.xmtp.eth`. - -
- -
🔔 Best Use of XMTP to Send Notifications - $500 +
🔔 Notifications Implement a Frame or Bot that sends notifications through XMTP. -**Requirements:** - -
Send notifications using XMTP libraries - **Install the js sdk:** ```tsx @@ -303,8 +286,6 @@ sendNotification("Hello from Farcaster!", "0x123...");
-
- --- ## Messaging apps 💬 @@ -320,7 +301,3 @@ Test the bots in messaging apps ![](https://github.com/xmtp/awesome-xmtp/assets/1447073/9bb4f8c2-321e-4b6d-b52e-2105d69c4d47) Learn about the 2 million identities part of XMTP by visiting the [Dune dashboard](https://dune.com/xmtp_team/dash). - -## Examples 🔥 - -See live examples in the [Awesome XMTP ⭐️](https://github.com/xmtp/awesome-xmtp) repo. diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 86c53573..f117d018 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -1669,15 +1669,15 @@ pre code { .details_node_modules-\@docusaurus-theme-classic-lib-theme-Details-styles-module, details { - border: 1px solid #8465cb !important; + border: 1px solid #4f45e4 !important; background-color: transparent !important; } .collapsibleContent_node_modules-\@docusaurus-theme-common-lib-components-Details-styles-module, details > div > div { - border-color: #8465cb !important; + border-color: #4f45e4 !important; } .details_node_modules-\@docusaurus-theme-common-lib-components-Details-styles-module > summary::before, summary::before { - border-color: transparent transparent transparent #8465cb !important; + border-color: transparent transparent transparent #4f45e4 !important; } From d82ff09ad5b1916ce6f92911eb8f9efd5b22d0be Mon Sep 17 00:00:00 2001 From: Fabri Date: Mon, 6 May 2024 19:34:13 -0300 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Scot Boyd --- docs/awesome.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/awesome.md b/docs/awesome.md index 3aef7ab0..f9c33293 100644 --- a/docs/awesome.md +++ b/docs/awesome.md @@ -48,7 +48,7 @@ run(async (context: HandlerContext) => { **Metadata** -In compliance with [Open Frames](https://github.com/open-frames/standard/blob/v0.0.1/README.md), Use a meta tag in your frame's HTML to declare the client protocols your frame supports. +In compliance with [Open Frames](https://github.com/open-frames/standard/blob/v0.0.1/README.md), use a meta tag in your frame's HTML to declare the client protocols your frame supports. ```html @@ -172,7 +172,7 @@ async function getResponse(req: any): Promise { ``` - [Frames.js](https://framesjs.org/reference/js/xmtp): Official Framesjs Documentation. -- [Quickstart](https://github.com/framesjs/frames.js/tree/main/templates/next-starter-with-examples/): Onchainkit quickstart that integrates XMTP. +- [Quickstart](https://github.com/framesjs/frames.js/tree/main/templates/next-starter-with-examples/): OnchainKit quickstart that integrates XMTP.