How to use an Arcana Auth signer with permissionless.js

Arcana Auth offers a self-custodial Web3 wallet embedded within applications, utilizing asynchronous distributed key generation algorithms for enhanced security and privacy. This wallet, accessible without the need for a browser extension, allows authenticated users to instantly access and sign blockchain transactions within the app environment.

Setup

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

Refer to the Arcana Auth documentation site for instructions on setting up an application with the Arcana Auth.
For a quick start, Arcana Auth provides a web app guide, available here.

Integration

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

Create the authProvider object

After following the Arcana Auth documentation, you will have access to a authProvider object as shown below which you can use to create a SmartAccountSigner object:

import { AuthProvider, type ConstructorParams } from "@arcana/auth"
import { providerToSmartAccountSigner } from "permissionless"
 
// Param options here will be specific to your project.  See the Arcana Auth docs for more info.
const params: ConstructorParams = {}
const authProvider = new AuthProvider(clientId, params)
 
// Convert the authProvider to a SmartAccountSigner
const smartAccountSigner = await providerToSmartAccountSigner(authProvider.provider)

Use with permissionless.js

SimpleAccount

import { signerToSimpleSmartAccount } from "permissionless/accounts"
import { createPimlicoBundlerClient, createPimlicoPaymasterClient } from "permissionless/clients/pimlico"
import { createPublicClient, http } from "viem"
import { generatePrivateKey, privateKeyToAccount } from "viem/accounts"
import { sepolia } from "viem/chains"
 
const pimlicoRpcUrl = `https://api.pimlico.io/v2/sepolia/rpc?apikey=<api-key>`
 
const pimlicoPaymaster = createPimlicoPaymasterClient({
    transport: http(pimlicoRpcUrl),
    entryPoint: ENTRYPOINT_ADDRESS_V06
})
 
const bundlerClient = createPimlicoBundlerClient({
    transport: http(pimlicoRpcUrl),
    entryPoint: ENTRYPOINT_ADDRESS_V06,
})
 
const publicClient = createPublicClient({
	transport: http("https://rpc.ankr.com/eth_sepolia"),
	chain: sepolia,
})
 
const smartAccount = await signerToSimpleSmartAccount(publicClient, {
	signer: smartAccountSigner,
	entryPoint: ENTRYPOINT_ADDRESS_V06,
})
 
const smartAccountClient = createSmartAccountClient({
	account: smartAccount,
	entryPoint: ENTRYPOINT_ADDRESS_V06,
	chain: sepolia, // or whatever chain you are using
	bundlerTransport: http(pimlicoRpcUrl, {
		timeout: 30_000 // optional
	}),
	middleware: {
		gasPrice: async () => (await bundlerClient.getUserOperationGasPrice()).fast,
		sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation,
	},
})