Introduction to FrameKit

FrameKit is a framework that enables developers to create interactive UI elements (frames) in messaging applications. These frames can be used for various purposes such as handling payments, displaying transaction receipts, managing conversations, and creating custom interactive interfaces.

Prerequisites

Before using FrameKit, ensure you have:

• Node.js version X.X.X or higher
• FrameKit package installed: npm install @xmtp/message-kit

Frame Types

FrameKit supports several types of frames:

• Payment Frames: Request and handle cryptocurrency payments
• Receipt Frames: Display transaction confirmations
• Conversation Frames: Manage DMs and group messages
• Custom Frames: Create custom interactive UI elements

Below are practical examples of implementing each frame type.

Payment

You can request payments using the payment frame:

// Request 1 USDC payment to a specific address
await context.requestPayment(1, "USDC", recipientAddress);

Properties:

• amount: Number representing the payment amount
• token: Supported tokens include "eth", "dai", "usdc", "degen"
• address: Recipient's wallet address or ENS name

Transaction Receipts

You can request receipts using the receipt frame:

// Request a receipt
await context.sendReceipt(urlOfTransaction);
// ie https://sepolia.basescan.org/tx/0x1234567890abcdef

Properties:

• url: URL of the transaction receipt scanner like basescan, etherscan, etc.

Dm and Groups on Converse

You can send messages to a user or group on Converse using the sendConverseDmFrame and sendConverseGroupFrame methods.

// Send a message to a user with an optional pretext
await context.sendConverseDmFrame("userAddress", "Hello, how are you?");
 
// Send a message to a group with an optional pretext
await context.sendConverseGroupFrame("groupId", "gm all!");

Custom

Custom frames allow you to create interactive UI elements. Here's how to create a token price frame:

const frame = {
  title: "Weather Update",
  buttons: [
    {
      content: "View Forecast",
      action: "link",
      target: "https://example.com/forecast",
    },
    {
      content: "Current Temperature (75°F)",
      action: "link",
      target: "https://example.com/current-temperature",
    },
  ],
  image: "https://example.com/weather.png",
};
 
await context.sendCustomFrame(frame);

Properties:

• title: The header text of your frame
• buttons: Array of interactive buttons (max 2)
• image: URL of the image to display
• action: Type of button action ("link" or "post")
• target: Destination URL for button clicks