How to use a Para signer with permissionless.js

Para offers a signing solution enabling the creation of secure, embedded MPC wallets accessible via email or social login. These wallets, compatible across different applications, offer portability, recoverability, and programmability, eliminating the need for users to establish separate signers or contract accounts for each application.

Setup

To use Para with permissionless.js, first create an application that integrates with Para.

Refer to the Para documentation site for instructions on setting up an application with the Para.
For a quick start, Para provides an example hub, available here.

Integration

Integrating permissionless.js with Para is straightforward after setting up the project. Para provides an Externally Owned Account (EOA) wallet to use as a signer with permissionless.js accounts.

Create the Para signer

After following the Para documentation, you will have access to a ParaWeb3Provider object that you can pass as an owner to createSmartAccountClient:

import Para from "@getpara/web-sdk"
import { createParaViemClient } from "@getpara/viem-v2-integration"
import { toSafeSmartAccount } from "permissionless/accounts"
import { http } from "viem"
import { sepolia } from "viem/chains"
 
// Param options here will be specific to your project.  See the Para docs for more info.
const para = new Para(env, apiKey)
 
// Convert a Para viem client to a SmartAccountSigner
// Follow the Para docs for more instructions on creating the Viem client https://docs.getpara.com/integration-guide/signing-transactions
const viemClient = createParaViemClient(para, {
	chain: sepolia,
	transport: http("https://rpc.ankr.com/eth_sepolia"),
})
 
const smartAccountSigner = toSafeSmartAccount({ owners: [viemClient] })

Use with permissionless.js

SimpleAccount

import { createSmartAccountClient } from "permissionless"
import { toSimpleSmartAccount } from "permissionless/accounts"
import { createPublicClient, http } from "viem"
import { sepolia } from "viem/chains"
import { createPimlicoClient } from "permissionless/clients/pimlico"
import { entryPoint07Address } from "viem/account-abstraction"
 
const publicClient = createPublicClient({
	chain: sepolia, // or whatever chain you are using
	transport: http(),
})
 
const pimlicoUrl = `https://api.pimlico.io/v2/sepolia/rpc?apikey=<PIMLICO_API_KEY>`
 
const pimlicoClient = createPimlicoClient({
	transport: http(pimlicoUrl),
	entryPoint: {
		address: entryPoint07Address,
		version: "0.7",
	},
})
 
const simpleSmartAccount = await toSimpleSmartAccount({
	owner: smartAccountOwner,
	client: publicClient,
	entryPoint: {
		address: entryPoint07Address,
		version: "0.7",
	},
})
 
const smartAccountClient = createSmartAccountClient({
	account: simpleSmartAccount,
	chain: sepolia,
	bundlerTransport: http(pimlicoUrl),
	paymaster: pimlicoClient,
	userOperation: {
		estimateFeesPerGas: async () => {
			return (await pimlicoClient.getUserOperationGasPrice()).fast
		},
	},
})