Frames.js

Discover how Frames.js seamlessly incorporates XMTP payloads

Offical Docs: Official Frames.js Documentation.
Frames.js Quickstart: Frames.js quickstart that integrates XMTP.

Metadata

First add the metadata indicating which protocols you support.

// ...
import { openframes } from "frames.js/middleware";
 
const frames = createFrames({
  // ...
  middleware: [
    openframes({
      clientProtocol: {
        id: "my-protocol",
        version: "1.0.0",
      },
      handler: {
        isValidPayload: (body: JSON) => {
          // Check if the request body is a valid Open Frames action
          // ...
          return isValid; // true or false
        },
        getFrameMessage: async (body: JSON) => {
          // Parse the data in the request body and return a Frame message
          // ...
          return frameMessage;
        },
      },
    }),
  ],
});

Validate incoming messages

Now validate the incoming message.

/* eslint-disable react/jsx-key */
import { openframes } from "frames.js/middleware";
import { createFrames } from "frames.js/next";
import { getXmtpFrameMessage, isXmtpFrameActionPayload } from "frames.js/xmtp";
 
export const frames = createFrames({
  middleware: [
    openframes({
      clientProtocol: {
        id: "xmtp",
        version: "2024-02-09",
      },
      handler: {
        isValidPayload: (body: JSON) => isXmtpFrameActionPayload(body),
        getFrameMessage: async (body: JSON) => {
          if (isXmtpFrameActionPayload(body)) {
            return undefined;
          }
          // payload is an XMTP frame action payload
          const result = await getXmtpFrameMessage(body);
          // ... do something with the verifiedWalletAddress
          const { verifiedWalletAddress } = result;
          return { ...result };
        },
      },
    }),
  ],
});