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 that you can pass as an owner to createeSmartAccountClient:

import { AuthProvider, type ConstructorParams } from "@arcana/auth"
 
// 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 SmartAccountOwner
const smartAccountOwner = authProvider.provider

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
		},
	},
})