https://github.com/zt-9/wagmi-erc4337
https://github.com/zt-9/wagmi-erc4337
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/zt-9/wagmi-erc4337
- Owner: zt-9
- Created: 2024-12-29T02:49:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-29T06:45:46.000Z (over 1 year ago)
- Last Synced: 2025-02-09T01:51:30.489Z (over 1 year ago)
- Language: TypeScript
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WAGMI-ERC4337 Example
This is a simple frontend application that enables users to send ERC-4337 user operations using **wagmi**, **viem**, and **permissionless.js**.
- Create & Fund an ERC-4337 smart contract account.
- Send ERC-4337 user operations.
---
## Prerequisites
1. **Pimlico API Key**:
- Obtain an API key by visiting the [Pimlico Documentation](https://docs.pimlico.io/).
2. **Environment File**:
- After acquiring the API key, create a `.env.local` file in the root directory based on the provided `.env.example` file.
Example:
```plaintext
VITE_PIMLICO_API_KEY=your_api_key_here
```
3. **Install Dependencies**:
- This project uses [**pnpm**](https://pnpm.io/installation) as the package manager. Make sure you have pnpm installed.
---
## Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/zt-9/wagmi-erc4337.git
cd wagmi-erc4337
```
2. Install the dependencies:
```bash
pnpm install
```
3. Set up the environment variables:
- Create a `.env.local` file and include your Pimlico API key as described above.
```bash
cp .env.example .env.local
```
4. Start the development server:
```bash
pnpm dev
```
---
## Usage
### Step 1: Fund Your Smart Contract Account
Before sending user operations, ensure your smart contract account is funded. Send ETH to your smart contract account address to cover transaction costs.
### Step 2: Send Your First User Operation
Send your first ERC-4337 user operation by just signing the User Operation.
---
## Dependencies
- **[wagmi](https://wagmi.sh/)**
- **[viem](https://viem.sh/)**
- **[permissionless.js](https://docs.pimlico.io/)**
---
## How It Works
### Step 1: Get Public and Wallet Clients
Use wagmi to get the viem publicClient and walletClient, which will be used for creating the ERC-4337 bundler and account.
```js
import { usePublicClient, useWalletClient } from "wagmi";
const publicClient = usePublicClient();
const { data: walletClient } = useWalletClient();
```
### Step 2: Load the ERC4337 smart contract account
We use the `toSimpleSmartAccount` to load a simple erc4337 account.
This will not deploy a smart contract account if it does not exist. It simply loads the deterministic address where the smart account will be deployed.
```js
import { toSimpleSmartAccount } from "permissionless/accounts";
// ERC 4337 smart contract account
const [smartAccount, setSmartAccount] = useState(null);
// Use an effect to load the smart account once walletClient is ready
useEffect(() => {
// If there's no wallet client yet, skip
if (!walletClient) return;
loadSmartAccount();
}, [walletClient, publicClient]);
async function loadSmartAccount() {
try {
const account = await toSimpleSmartAccount({
client: publicClient,
owner: walletClient!,
});
setSmartAccount(account);
} catch (err) {
console.error("Failed to get ERC4337 account:", err);
}
}
```
### Step 3: Create a Bundler Client
Create the bundler client with pimlico RPC
```js
import { createBundlerClient } from "viem/account-abstraction";
const bundlerClient = createBundlerClient({
account: smartAccount,
client: publicClient,
transport: http(`https://api.pimlico.io/v2/sepolia/rpc?apikey=APIKEY`),
});
```
### Step 4: Send a User Operation
Send a user operation to transfer ETH:
```js
const hash = await bundlerClient.sendUserOperation({
account: smartAccount,
calls: [
{
to: to,
value: parseEther(value),
},
],
});
```
This will send ETH to the specified to address `to`.