Using ERC-4337

The Module Sandbox provides a complete abstraction of the ERC-4337 flows. This page gives an overview of the different helper utilities that enable this and how you can use them.

Creating and executing a UserOperation

To create and execute a UserOperation, you can use the useCreateUserOp (opens in a new tab) hook. The hook can be used like a regular React hook:

const createUserOp = useCreateUserOp();

The main argument for creating a UserOperation is the actions array. It consists of a list of ExecuteAction objects, which have the following parameters:

type ExecuteAction = {
  target: Address;
  value: BigInt;
  callData: Hex;
};

The createUserOp object has a mutateAsync method that can be used to create a UserOperation:

userOp = await createUserOp.mutateAsync({
  name: `Display Name in the UI`,
  actions,
});

Optionally, you can also provide additional parameters to the mutateAsync method:

• account: The account to use for the UserOperation. If not provided, the active account will be used. (Type: Account (opens in a new tab))
• validator: The validator to use for the UserOperation. If not provided, the active validator will be used. (Type: Validator (opens in a new tab))
• callback: A callback function that will be called when the UserOperation is executed. (Type: () => void)