Merge pull request #722 from xmtp/farhack

Farhack

docs/build/frames.md

@@ -20,138 +20,26 @@ XMTP contributes to the Open Frames standard, fostering interoperability and ope
 
 :::
 
----
-
-## Third Party Tools
-
-These tools already provide integration support interoperable Frames.
+### Frameworks
 
-### Tooling
-
-Third party frameworks and tooling who have already integrated XMTP signing into their offerings:
+Popular frameworks have already integrated Open Frames into their stack:
 
 - [**OnChainKit**](https://onchainkit.xyz/xmtp/introduction): Discover how OnchainKit seamlessly incorporates XMTP payloads.
+  - [Quickstart](https://github.com/daria-github/a-frame-in-100-lines/): OnchainKit quickstart that integrates XMTP.
 - [**Frames.js**](https://framesjs.org/reference/js/xmtp): Learn about the integration of XMTP payloads within FrameJS.
+  - [Quickstart](https://github.com/framesjs/frames.js/tree/main/templates/next-starter-with-examples/): OnchainKit quickstart that integrates XMTP.
+- [**Frog**](https://frog.fm/getting-started): There is an active [**discussion**](https://github.com/wevm/frog/discussions/51) to integrate Open Frames.
 
 ### Clients
 
 Some clients are fully XMTP compatible and can render Frames signing XMTP payloads:
 
-- [**XMTP.chat**](https://xmtp.chat/): Engage with Frames firsthand by trying them on web.
 - [**Converse**](https://converse.xyz): Converse is Frame compatible. Send your Frames through Converse.
+- [**Dev Inbox**](https://github.com/xmtp/dev-inbox/): Engage with Frames firsthand by trying them on web.
 
-## Getting started
-
-These are the foundational tools that allow developers to create, sign, and manage Frames. The protocol libraries are essential for interacting with the XMTP network at a lower level, handling the creation of frames, signing payloads, and managing frame actions. Key aspects include:
-
-- [**Declare Protocol Compatibility**](#protocol-compatibility): Ensure your application can interact with Frames by declaring protocol compatibility.
-- [**Manage requests**](#manage-requests): Checks if a URL in message content is suitable for frame processing.
-- [**Validate incoming messages**](#validate-incoming-messages): Implements security measures to authenticate and secure frame actions, ensuring the integrity and origin of frame interactions.
-
-### Protocol compatibility
-
-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
-<meta property="of:accepts:xmtp" content="vNext" />
-```
-
-This informs client applications about the protocols your frame can interact with.
-
-### Manage requests
-
-These packages enable your frame to send, receive requests across different protocols.
-
-<Tabs >
-<TabItem value="npm" label="npm" >
-
-```bash
-yarn install @xmtp/frames-client
-```
-
-</TabItem>
-<TabItem value="yarn" label="Yarn" >
-
-```bash
-yarn add @xmtp/frames-client
-```
-
-</TabItem>
-<TabItem value="bun" label="bun" >
-
-Currently, Bun does not offer full compatibility with XMTP. It is recommended to use Yarn 4 as an alternative to prevent any unforeseen issues.
-
-</TabItem>
-</Tabs>
-
-```jsx
-const xmtpClient = await Client.create(wallet);
-const framesClient = new FramesClient(xmtpClient);
-
-const frameUrl = "https://www.myframe.xyz";
-
-// Read data from a frame
-const frameMetadata = await framesClient.proxy.readMetadata(frameUrl);
-
-// Get a proxied image URL, which you can use directly in an <image> tag
-const imageUrl = framesClient.proxy.mediaUrl(
-  frameMetadata.metaTags["fc:frame:image"],
-);
-
-// Handle a click to button 2 from a conversation with topic "/xmtp/0/123" and participant addresses "abc" and "xyz"
-const payload = await signFrameAction({
-  frameUrl,
-  buttonIndex: 2,
-  conversationTopic: "/xmtp/0/123",
-  participantAccountAddresses: ["abc", "xyz"],
-});
-
-// If the button action type was `post`
-const updatedFrameMetadata = await framesClient.proxy.post(frameUrl, payload);
-// If the button action type was `post_redirect`
-const { redirectedTo } = await framesClient.proxy.postRedirect(
-  frameUrl,
-  payload,
-);
-```
-
-### Validate incoming messages
-
-To start, add the necessary XMTP packages to your project:
-
-<Tabs >
-<TabItem value="npm" label="npm" >
-
-```bash
-yarn install @xmtp/frames-validator
-```
-
-</TabItem>
-<TabItem value="yarn" label="Yarn" >
-
-```bash
-yarn add @xmtp/frames-validator
-```
-
-</TabItem>
-<TabItem value="bun" label="bun" >
-
-Currently, Bun does not offer full compatibility with XMTP. It is recommended to use Yarn 4 as an alternative to prevent any unforeseen issues.
-
-</TabItem>
-</Tabs>
-
-Implement message validation using `@xmtp/frames-validator` to ensure the authenticity of incoming POST requests. This step is crucial for security, especially when dealing with multiple protocols.
+## Libraries
 
-```tsx
-import { validateFramesPost } from "@xmtp/frames-validator";
+These are the foundational tools that allow developers to create, sign, and manage Frames created by Open Frames & XMTP
 
-export function handler(requestBody: any) {
-  if (requestBody.clientProtocol.startsWith("xmtp")) {
-    const { verifiedWalletAddress } = await validateFramesPost(requestBody);
-    // Handle verified XMTP payload
-  } else {
-    // Handle Farcaster or other protocol payloads
-  }
-}
-```
+- [**@xmtp/frames-validator**](https://github.com/xmtp/xmtp-node-js-tools/blob/main/packages/frames-validator/): A set of tools for validating POST payloads from XMTP Frames
+- [**@xmtp/frames-client**](https://github.com/xmtp/xmtp-web/tree/main/packages/frames-client): Library used by messaging apps to render XMTP frames.

docs/build/get-started/examples.md

@@ -22,7 +22,7 @@ A quickstart is a brief guide or repo aimed at helping XMTP developers to unders
 
 <ul>
   <li><a href="/docs/tutorials/token-gated-group-chat" class="plausible-event-name=Quickstart">Token Gates Group Chat</a><br/><small>How to build a token-gated group chat with Converse and XMTP.</small></li>
-  <li><a href="/docs/tutorials/render-frames" class="plausible-event-name=Quickstart">Render Frames</a><br/><small>Learn how to render interoperable Frames in your messaging apps</small></li>
+  <li><a href="https://github.com/xmtp/xmtp-quickstart-chat-frames" class="plausible-event-name=Quickstart">Render Frames</a><br/><small>Learn how to render interoperable Frames in your messaging apps</small></li>
   <li><a href="/docs/tutorials/portable-consent/subscribe" class="plausible-event-name=Quickstart">Subscribe</a><br/><small>How to build a Subscribe button to record broadcast message user consent</small></li>
   <li><a href="/docs/tutorials/portable-consent/request-inbox" class="plausible-event-name=Quickstart">Request inbox</a><br/><small>How to build consent, like Allowed/Requested tabs and Accept/Block buttons</small></li>
   <li><a href="https://github.com/xmtp/xmtp-quickstart-reactjs" class="plausible-event-name=Quickstart">Floating Inbox</a><br/><small>Floating inbox quickstart app in JS. Use it to help you build your own app with XMTP.</small></li>

docs/faq.md

@@ -1,6 +1,6 @@
 ---
 sidebar_label: FAQ
-sidebar_position: 4
+sidebar_position: 5
 description: "Get answers to the most frequently asked questions about XMTP."
 ---
 
@@ -474,7 +474,7 @@ import "./polyfills";
 
 ### Does XMTP works with Bun?
 
-Currently, Bun does not offer full compatibility with XMTP. It is recommended to use Yarn 4 as an alternative to prevent any unforeseen issues.
+Currently, Bun does not offer full compatibility with XMTP. It is recommended to use Yarn as an alternative to prevent any unforeseen issues.
 
 #### Using config files