Example Idea: Capsule + Pimlico

[adeets-22]

Description: Build a simple example app that uses Pimlico for account abstraction and Capsule. Leverage the Pimlico example guide to do this.

Use Case: For example, allow users to login with their social accounts via Capsule and enable gas sponsorships or bundled transactions through Pimlico.

[MrRaccxxn]

Hi! Can i be assigned to this issue?

[adeets-22]

Awesome, just assigned you!

[adeets-22]

Hey @MrRaccxxn - any update on this?

[MrRaccxxn]

Got issues with my laptop, but finally okay again! Will push the PR this weekend

[adeets-22]

Woohoo! Sounds good :)

[MrRaccxxn]

One question related to the issue: Should we implement a complete new project like "with-next-pimlico", or implement this as one extra step in the current version of the "with-next" folder inside the examples-hub. From my understand is the first one, but I saw another PR raised using the second approach

[adeets-22]

Hi @MrRaccxxn! Please feel free to implement it separately so that it is a standalone app cc: @jlm0 for any additional context

[MrRaccxxn]

Hello! @jlm0 going through the docs of permissionless and capsule

I encounter one issue at the moment of linking the "smartAccountOwner" to the owner field of toSimpleSmartAccount (The types are different. toSimpleSmartAccount expects a LocalAccount type, and it belongs to another function, createCapsuleAccount from Capsule, that is not included in the documentation).

Trying to use the smartAccountOwner, I get this error because of types:
"Owner account not found."

Using the capsuleAccount variable bypasses this type mismatch but fails in the operation, resulting in:
"Details: UserOperation reverted with reason: AA23 reverted - 0xf645eedf Version: [email protected]
at getBundlerError (getBundlerError.js:102:16)
at eval (getUserOperationError.js:19:91)
at getUserOperationError (getUserOperationError.js:27:7)
at sendUserOperation (sendUserOperation.js:69:108)
at async sendTransaction (sendTransaction.js:71:22)
at async handleSign (with-pimlico.tsx:57:20)Caused by: RpcRequestError: RPC Request failed."

Note: If I skip Capsule and try the same code with privateKeyToAccount from Viem, it works as expected.

[adeets-22]

Thank you for surfacing @MrRaccxxn! We are taking a look now

[adeets-22]

Hi @MrRaccxxn! Appreciate your patience here, we're a bit backlogged so may take a few days to get back to you. Appreciate all the patience

This will not impact your ability to get the bounty – we'll be in touch

[jlm0]

@MrRaccxxn I've migrated this issue to be part of our awesome-capsule repo to better showcase community contributions. Your app no longer has to be relative to the examples-hub app but rather a direct standalone application. This will help minimize any issues with dependencies or frameworks so your app submission just focusses on capsule with pimlico.

I encounter one issue at the moment of linking the "smartAccountOwner" to the owner field of toSimpleSmartAccount (The types are different. toSimpleSmartAccount expects a LocalAccount type, and it belongs to another function, createCapsuleAccount from Capsule, that is not included in the documentation).

Thank you for bringing it up. Usage is createCapsuleAccount is correct and the docs are out of date and need to be updated to reflect this. Having devs like you go through integration helps us identify any missing details. So thank you!

Trying to use the smartAccountOwner, I get this error because of types: "Owner account not found."

Using the capsuleAccount variable bypasses this type mismatch but fails in the operation, resulting in: "Details: UserOperation reverted with reason: AA23 reverted - 0xf645eedf Version: [email protected] at getBundlerError (getBundlerError.js:102:16) at eval (getUserOperationError.js:19:91) at getUserOperationError (getUserOperationError.js:27:7) at sendUserOperation (sendUserOperation.js:69:108) at async sendTransaction (sendTransaction.js:71:22) at async handleSign (with-pimlico.tsx:57:20)Caused by: RpcRequestError: RPC Request failed."

This is likely due to how smart account operation signatures are validated. The last byte v of the signatures likely needs to be modified for the network to not reject the operation. Given a signature you can modify it before sending it like this:

  let signature = (res as SuccessfulSignatureRes).signature;

  // Adjust `v` if it is below 27.
  const lastByte = parseInt(signature.slice(-2), 16);
  if (lastByte < 27) {
    const adjustedV = (lastByte + 27).toString(16).padStart(2, "0");
    signature = signature.slice(0, -2) + adjustedV;
  }

  return `0x${signature}`;

You can see an example of this with Alchemy's AA here.

Please let me know if you have any additional questions about migrating to this repo or issues with Pimlico. Thanks!

[adeets-22]

hey @MrRaccxxn confirming you're still working on this? excited to check out your work :)

[MrRaccxxn]

Hello! Just putting hands on it again! will raise the PR tomorrow

[jlm0]

Hi @MrRaccxxn checking in on your submission status. Is there anything we can help you with?

[MrRaccxxn]

Sorry for not been answering on time, I will understand if this bounty is closed or moved to other, but even in that case I would like to understand what am I missing in this example.

First thing first, I moved the repo from Capsule to Para to be more updated and in the migration realized some stuff that maybe could be useful:
Note: My node version is v22.13.0

• In NextJS got the issue of the import styles that never got resolved (The modal styles exists in the node modules, but getting styled.div not found, so I guess the whole styled-components are kinda not found. Had to move to react + vite)
• In both Vite and NextJS using the new Para, need to install react-query, I mean this is kinda obvious, but it’s always good to include it on docs.
• ParaProvider don’t work, or at least some config is missing in docs, so I couldn’t use new hooks
• On react + vite docs, the docs where copied from next and some stuff is mixed (For example the envs import)

I understand completely that migration of stuff is really hard haha, and maintain docs is always a hard work, but just to note and try to be helpful (also any of those issues apart from the styles was a blocker or took more that 1 minute to realize the correct way)

Going back to my issue:

I replaced the signMessage to the custom signMessage, but to sponsor the transaction we should also modify the transaction? Let’s say modify the “signTransaction”? (I tried to do a function on this, but not sure how a hashTransaction should work, and if view or any other library already has one implemented

The repo is here: https://github.com/MrRaccxxn/para-pimlico

And the issue kinda the same (AA23)

The `validateUserOp` function on the Smart Account reverted. Request Arguments: callData: 0xb61d27f60000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000 callGasLimit: 17955 factory: 0x91E60e0613810449d098b0b5Ec8b51A0FE8c8985 factoryData: 0x5fbfb9cf00000000000000000000000077025dd818a6876bdd378c4a4e9f7694ff31ec870000000000000000000000000000000000000000000000000000000000000000 maxFeePerGas: 2.050185764 gwei maxPriorityFeePerGas: 0.023203901 gwei nonce: 32081417023783945883582600314880 paymaster: 0x0000000000000039cd5e8aE05257CE51C473ddd1 paymasterData: 0x00000067a922a7000000000000c438286b239db8ea46dc5d4bd613d88f49fa5f397cc146dd82d42004ba10b49c660341f79d96be8b3f1ed542550830e1a80c8a2b5d97f4449962357bd9a5dbf01b paymasterPostOpGasLimit: 20000 paymasterVerificationGasLimit: 60000 preVerificationGas: 56289 sender: 0x557E4D1Caecf8c14BC0968251766365662D9B960 signature: 0xaf3999d12bdc5593d851b2708d8282c3eb1aabe2ff5bfc392b0f2d5653d121fb2f88e2aac55ef9cbda29d5a271958e0315c8b6cadad25ed1882762523d42483501 verificationGasLimit: 248102 Details: UserOperation reverted with reason: AA23 reverted - 0xf645eedf Version: [email protected]