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.
WARNING
This requires your user to be logged in. See useAuthenticate
for more details.
Import
import { useSignTypedData } from "@alchemy/aa-alchemy/react";
Usage
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.