useSignTypedData

The useSignTypedData hook enables signing typed data on behalf of the user's Embedded Account. If the account is not yet deployed onchain, this will use ERC-6492 to sign the typed data.

Import

import { useSignTypedData } from "@alchemy/aa-alchemy/react";

Usage

useSignTypedData.tsx

import {
  useSignTypedData,
  useSmartAccountClient,
} from "@alchemy/aa-alchemy/react";
import { useState } from "react";
 
export function ComponentWithSignTypedData() {
  /**
   * Assumes the app has context of a signer with an authenticated user
   * by using the `AlchemyAccountProvider` from `@alchemy/aa-alchemy/react`.
   */
  const [typedDataMessage, setTypedDataMessage] = useState("");
  const client = useSmartAccountClient({
    type: "MultiOwnerModularAccount",
  });
  const { signTypedData, isSigningTypedData } = useSignTypedData({
    client,
    onSuccess: (signature) => {
      // Do something with the signature
    },
    onError: (error) => {
      // Handle the error
    },
    // [optional] ...additional mutationArgs
  });
 
  return (
    <div>
      <input
        placeholder="enter your typed data message to sign..."
        value={typedDataMessage}
        onChange={(e) => setTypedDataMessage(e.target.value)}
      ></input>
      <button
        onClick={() =>
          signTypedData({
            typedData: {
              types: {
                Mail: [
                  { name: "from", type: "string" },
                  { name: "to", type: "string" },
                  { name: "contents", type: "string" },
                ],
              },
              primaryType: "Mail",
              message: {
                from: "Alice",
                to: "Bob",
                contents: typedDataMessage,
              },
            },
          })
        }
        disabled={isSigningTypedData}
      >
        {isSigningTypedData ? "Signing..." : "Sign Typed Data"}
      </button>
    </div>
  );
}

Params

client

AlchemySmartAccountClient | undefined A AlchemySmartAccountClient with methods to interact with an Alchemy smart account.

...mutationArgs

You can optionally specify any of the React Query useMutation parameters as parameters to this hook.

Return Type

import { type UseSignTypedDataResult } from "@alchemy/aa-alchemy/react";

Returns an object containing the following state.

signTypedData

UseMutateFunction A React query mutation function to sign typed data. It returns a Hex representation of the signed typed data. It takes in an object with a TypedDataDefinition field called typedData.

signTypedDataAsync

UseMutateAsyncFunction A React query async mutation function to sign typed data. Via an awaitable promise, it returns a Hex representation of the signed typed data. It takes in an object with a TypedDataDefinition field called typedData.

signedTypedData

Hex | undefined A flag that determines whether the account recovery details were successfully exported and now viewable in the application.

isSigningTypedData

boolean A flag that determines whether the mutation is still running or not.

error

Error | null A field that relays any errors from the mutation. It is null if there is no error.