@xmtp/frames-client
v1.0.1
Published
This package is used by messaging apps to render Open Frames.
Downloads
2,129
Readme
Frames Client
This package is used by messaging apps to render Open Frames.
Usage
const xmtpClient = await Client.create(wallet);
const framesClient = new FramesClient(xmtpClient);
const frameUrl = "https://www.myframe.xyz";
const framePostUrl = "https://www.myframe.xyz/api/post"; //fc:frame:post_url
// 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 textInputValue = "Your value";
const payload = await signFrameAction({
frameUrl,
inputText: textInputValue || undefined,
buttonIndex: 2,
conversationTopic: "/xmtp/0/123",
participantAccountAddresses: ["abc", "xyz"],
address: "0x...",
state: frameMetadata?.frameInfo?.state, // Pulled from frame metadata
});
// If the button action type was `post`
const updatedFrameMetadata = await framesClient.proxy.post(
framePostUrl,
payload,
);
// If the button action type was `post_redirect`
const { redirectedTo } = await framesClient.proxy.postRedirect(
framePostUrl,
payload,
);
// If the button action type was `postTransaction`
const transactionInfo = await framesClient.proxy.postTransaction(
framePostUrl,
payload,
);