Wallet Signatures Frames

Frames can initiate requests to sign typed data using a connected wallet after which the client will call back your Frame with the requested signature.

An example snippet can be found below.

// ...
buttons: [
  <Button action="tx" target="/signature-data" post_url="/frames">
    Sign data
  </Button>,
];

In your /signature-data route you should handle the request and return signature data that conforms to the TransactionTargetResponseSignTypedDataV4 type. The transaction helper function can be used to create the data to be signed.

./app/frames/signature-data/route.ts

import { frames } from "../frames";
import { transaction } from "frames.js/core";
 
export const POST = frames(async (ctx) => {
  if (!ctx?.message) {
    throw new Error("Invalid frame message");
  }
 
  return transaction({
    chainId: "eip155:10", // OP Mainnet 10
    method: "eth_signTypedData_v4",
    params: {
      domain: {
        chainId: 10,
      },
      types: {
        Person: [
          { name: "name", type: "string" },
          { name: "wallet", type: "address" },
        ],
        Mail: [
          { name: "from", type: "Person" },
          { name: "to", type: "Person" },
          { name: "contents", type: "string" },
        ],
      },
      primaryType: "Mail",
      message: {
        from: {
          name: "Cow",
          wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
        },
        to: {
          name: "Bob",
          wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
        },
        contents: "Hello, Bob!",
      },
    },
  });
});

Use the Wallet Signatures starter as a template to build your transaction Frames.

Using the connected wallet address

The client will include the user's connected wallet address that will be executing the transaction in the frame action payload when a frame button with action="tx" set is pressed. See transactions guide for more information.