{"id":25158405,"url":"https://github.com/zt-9/wagmi-erc4337","last_synced_at":"2025-04-03T12:42:16.325Z","repository":{"id":270176942,"uuid":"909542334","full_name":"zt-9/wagmi-erc4337","owner":"zt-9","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-29T06:45:46.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T01:51:30.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zt-9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-29T02:49:31.000Z","updated_at":"2024-12-29T06:45:49.000Z","dependencies_parsed_at":"2024-12-29T05:27:38.333Z","dependency_job_id":null,"html_url":"https://github.com/zt-9/wagmi-erc4337","commit_stats":null,"previous_names":["zt-9/wagmi-erc4337"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zt-9%2Fwagmi-erc4337","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zt-9%2Fwagmi-erc4337/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zt-9%2Fwagmi-erc4337/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zt-9%2Fwagmi-erc4337/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zt-9","download_url":"https://codeload.github.com/zt-9/wagmi-erc4337/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247005377,"owners_count":20868019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-09T01:51:35.642Z","updated_at":"2025-04-03T12:42:16.305Z","avatar_url":"https://github.com/zt-9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WAGMI-ERC4337 Example\n\nThis is a simple frontend application that enables users to send ERC-4337 user operations using **wagmi**, **viem**, and **permissionless.js**.\n\n- Create \u0026 Fund an ERC-4337 smart contract account.\n- Send ERC-4337 user operations.\n\n---\n\n## Prerequisites\n\n1. **Pimlico API Key**:\n   - Obtain an API key by visiting the [Pimlico Documentation](https://docs.pimlico.io/).\n   \n2. **Environment File**:\n   - After acquiring the API key, create a `.env.local` file in the root directory based on the provided `.env.example` file.\n     \n     Example:\n     ```plaintext\n     VITE_PIMLICO_API_KEY=your_api_key_here\n     ```\n\n3. **Install Dependencies**:\n   - This project uses [**pnpm**](https://pnpm.io/installation) as the package manager. Make sure you have pnpm installed.\n     \n\n---\n\n## Setup Instructions\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/zt-9/wagmi-erc4337.git\n   cd wagmi-erc4337\n   ```\n\n2. Install the dependencies:\n   ```bash\n   pnpm install\n   ```\n\n3. Set up the environment variables:\n   - Create a `.env.local` file and include your Pimlico API key as described above.\n   ```bash\n   cp .env.example .env.local\n   ```\n\n4. Start the development server:\n   ```bash\n   pnpm dev\n   ```\n\n---\n\n## Usage\n\n### Step 1: Fund Your Smart Contract Account\nBefore sending user operations, ensure your smart contract account is funded. Send ETH to your smart contract account address to cover transaction costs.\n\n### Step 2: Send Your First User Operation\nSend your first ERC-4337 user operation by just signing the User Operation.\n\n---\n\n## Dependencies\n- **[wagmi](https://wagmi.sh/)**\n- **[viem](https://viem.sh/)**\n- **[permissionless.js](https://docs.pimlico.io/)**\n\n---\n\n## How It Works\n\n### Step 1: Get Public and Wallet Clients\nUse wagmi to get the viem publicClient and walletClient, which will be used for creating the ERC-4337 bundler and account.\n\n```js\nimport { usePublicClient, useWalletClient } from \"wagmi\";\n\nconst publicClient = usePublicClient();\nconst { data: walletClient } = useWalletClient();\n```\n\n### Step 2: Load the ERC4337 smart contract account\nWe use the `toSimpleSmartAccount` to load a simple erc4337 account.\nThis 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.\n```js\n\timport { toSimpleSmartAccount } from \"permissionless/accounts\";\n\t// ERC 4337 smart contract account\n\tconst [smartAccount, setSmartAccount] = useState\u003cany\u003e(null);\n\n\t// Use an effect to load the smart account once walletClient is ready\n\tuseEffect(() =\u003e {\n\t\t// If there's no wallet client yet, skip\n\t\tif (!walletClient) return;\n\t\tloadSmartAccount();\n\t}, [walletClient, publicClient]);\n\n\tasync function loadSmartAccount() {\n\t\ttry {\n\t\t\tconst account = await toSimpleSmartAccount({\n\t\t\t\tclient: publicClient,\n\t\t\t\towner: walletClient!,\n\t\t\t});\n\t\t\tsetSmartAccount(account);\n\t\t} catch (err) {\n\t\t\tconsole.error(\"Failed to get ERC4337 account:\", err);\n\t\t}\n\t}\n```\n\n### Step 3: Create a Bundler Client\n\nCreate the bundler client with pimlico RPC\n```js\nimport { createBundlerClient } from \"viem/account-abstraction\";\n\nconst bundlerClient = createBundlerClient({\n  account: smartAccount,\n  client: publicClient,\n  transport: http(`https://api.pimlico.io/v2/sepolia/rpc?apikey=APIKEY`),\n});\n```\n\n### Step 4: Send a User Operation\n\nSend a user operation to transfer ETH:\n```js\nconst hash = await bundlerClient.sendUserOperation({\n  account: smartAccount,\n  calls: [\n    {\n      to: to,\n      value: parseEther(value),\n    },\n  ],\n});\n```\n\nThis will send ETH to the specified to address `to`.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzt-9%2Fwagmi-erc4337","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzt-9%2Fwagmi-erc4337","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzt-9%2Fwagmi-erc4337/lists"}