Skip to content

Commit

Permalink
fix: Update ERC-4337 guide (#399)
Browse files Browse the repository at this point in the history
* fix: Fix 4337 guide code snippets

* Update intro
  • Loading branch information
germartinez authored Mar 15, 2024
1 parent 97b6706 commit 2f2ce02
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions pages/home/4337-guides/pimlico-sponsor-account.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import CustomCard from '../../../components/CustomCard'

In this guide, you will learn how to sponsor the deployment of an ERC-4337 Safe account and its future user operations using [Pimlico](https://pimlico.io) infrastructure and the [permissionless](https://npmjs.com/permissionless) library.

This guide focuses on how user operations are built and what happens under the hood when a Safe is configured and deployed with the `Safe4337Module` enabled. For a quick start guide, feel free to check [How to create and use a Safe account with permissionless.js](https://docs.pimlico.io/permissionless/how-to/accounts/use-safe-account).

Pimlico is one of the most popular ERC-4337 account abstraction infrastructure platforms, which provides a suite of tools and services to help build, deploy, and manage smart accounts on EVM-compatible chains.

`permissionless` is a TypeScript library focused on building with the ERC-4337 stack, including smart accounts, bundlers, paymasters, and user operations. Some of its core principles are providing a great developer experience and avoiding vendor lock-in by supporting different providers and ERC-4337 smart accounts, including Safe.
Expand Down Expand Up @@ -171,7 +173,7 @@ The `initializer` is calculated using the `getInitializerCode` function from its

In this case, we are creating a Safe account with one owner (our signer), threshold one, and the `Safe4337Module` as the `fallbackHandler`.

This initialization also includes the option to execute a call by using the `to` and `data` parameters, which we will use to enable the `Safe4337Module` contract in the Safe and give an allowance to the `EntryPoint` contract in case we want to pay the gas fees in an ERC-20 token like USDC. As we are performing multiple calls, we need to encode a call to the `MultiSend` contract using the `encodeMultiSend` function, setting the `MULTISEND_ADDRESS` as the `to` and its encoding as the `data`.
This initialization also includes the option to execute a call by using the `to` and `data` parameters, which we will use to enable the `Safe4337Module` contract in the Safe and give an allowance to the `EntryPoint` contract in case we want to pay the gas fees in an ERC-20 token like USDC. As we are performing multiple calls, we need to encode a call to the `MultiSend` contract using the `encodeMultiSend` function, setting the `SAFE_MULTISEND_ADDRESS` as the `to` and its encoding as the `data`.

To enable the module in the `enableModuleCallData` function, we will encode a call to the `AddModuleLib` contract by passing the address of the `Safe4337Module`.

Expand All @@ -185,7 +187,7 @@ To enable the module in the `enableModuleCallData` function, we will encode a ca
safeProxyFactoryAddress: SAFE_PROXY_FACTORY_ADDRESS,
safeSingletonAddress: SAFE_SINGLETON_ADDRESS,
saltNonce,
multiSendAddress: MULTISEND_ADDRESS,
multiSendAddress: SAFE_MULTISEND_ADDRESS,
erc20TokenAddress: USDC_TOKEN_ADDRESS,
paymasterAddress: ERC20_PAYMASTER_ADDRESS
})
Expand Down Expand Up @@ -444,7 +446,7 @@ Notice that the `sender` address will depend on the value of the Safe configurat
safeProxyFactoryAddress: SAFE_PROXY_FACTORY_ADDRESS,
safeSingletonAddress: SAFE_SINGLETON_ADDRESS,
saltNonce,
multiSendAddress: MULTISEND_ADDRESS,
multiSendAddress: SAFE_MULTISEND_ADDRESS,
erc20TokenAddress: USDC_TOKEN_ADDRESS,
paymasterAddress: ERC20_PAYMASTER_ADDRESS
})
Expand Down Expand Up @@ -636,15 +638,17 @@ If we don't want to use a Paymaster to pay for the gas fees, we need to ensure t

### Sign the UserOperation

To sign the `sponsoredUserOperation`, we have created the `signUserOperation` utility function that returns the signature from the signer and accepts the following parameters. Check the `utils.ts` tab to see its implementation.
To sign the `sponsoredUserOperation`, we have created the `signUserOperation` utility function that returns the signature from the signer and accepts the following parameters. Check the second tab to see its implementation.

<Tabs items={['script.ts', 'utils.ts']}>
<Tabs items={['script.ts', 'signUserOperation.ts']}>
<Tabs.Tab>
```typescript
const chainId = 100

sponsoredUserOperation.signature = await signUserOperation(
sponsoredUserOperation,
signer,
chainId: 100
chainId,
SAFE_4337_MODULE_ADDRESS
)
```
Expand Down

0 comments on commit 2f2ce02

Please sign in to comment.