Particle Network

Particle Network is the Intent-Centric, Modular Access Layer of Web3. With Particle's Smart Wallet-as-a-Service, developers can curate unparalleled user experience through modular and customizable embedded wallet components. By utilizing MPC-TSS for key management, Particle can streamline onboarding via familiar Web2 accounts—such as Google accounts, email addresses, phone numbers, etc.

Leveraging both Particle and Account Kit enables a streamlined onboarding flow, with social logins and Signer key management being handled by Particle while Account Kit takes this experience to the next level with account abstraction - facilitating powerful user experience.

Integration

Sign up for a Particle Account

To configure Particle, you'll need to start by quickly signing up for a Particle account, creating a project, and then creating an application. You can learn more about this process within their quickstart guide. Additionally, you can sign up through the Particle dashboard.

Install the SDK

ParticleSigner requires installation of the @particle-network/auth and @particle-network/provider. aa-signers lists them as optional dependencies.

npm

npm i -s @particle-network/auth
npm i -s @particle-network/provider

yarn

yarn add @particle-network/auth
yarn add @particle-network/provider

Create a SmartAccountSigner

With @particle-network/auth and @particle-network/provider installed, you can move on to creating a SmartAccountSigner. To do this, you will need to ensure you have your projectId, clientKey, and appId from the Particle dashboard to use in the configuration of ParticleNetwork.

From here, setting up a SmartAccountSigner involves the initialization of ParticleProvider to be used in a viem wallet client, which then gets passed into our SmartAccountSigner.

import { ParticleSigner } from "@alchemy/aa-signers/particle";
import { ParticleNetwork } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";

export const createParticleSigner = async () => {
  const particle = new ParticleNetwork({
    projectId: process.env.REACT_APP_PROJECT_ID as string,
    clientKey: process.env.REACT_APP_CLIENT_KEY as string,
    appId: process.env.REACT_APP_APP_ID as string,
    chainName: "polygon",
    chainId: 80001,
  });
  const particleProvider = new ParticleProvider(particle.auth);

  const particleSigner = new ParticleSigner({
    inner: particle,
    provider: particleProvider,
  });

  particleSigner.authenticate({
    loginOptions: {},
    login: async (loginOptions) => {
      particleSigner.inner.auth.login(loginOptions);
    },
  });

  return particleSigner;
};

Use it with Light Account

Next, setup the Particle SDK and create an authenticated ParticleSigner using the aa-signers package:

example.ts

import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { createParticleSigner } from "./particle";

const chain = polygonMumbai;
const provider = await createModularAccountAlchemyClient({
  apiKey: process.env.ALCHEMY_API_KEY,
  chain,
  signer: await createParticleSigner(),
});

particle.ts

import { ParticleSigner } from "@alchemy/aa-signers/particle";
import { ParticleNetwork } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";

export const createParticleSigner = async () => {
  const particle = new ParticleNetwork({
    projectId: process.env.REACT_APP_PROJECT_ID as string,
    clientKey: process.env.REACT_APP_CLIENT_KEY as string,
    appId: process.env.REACT_APP_APP_ID as string,
    chainName: "polygon",
    chainId: 80001,
  });
  const particleProvider = new ParticleProvider(particle.auth);

  const particleSigner = new ParticleSigner({
    inner: particle,
    provider: particleProvider,
  });

  particleSigner.authenticate({
    loginOptions: {},
    login: async (loginOptions) => {
      particleSigner.inner.auth.login(loginOptions);
    },
  });

  return particleSigner;
};

Video tutorial

Particle Network has also produced a comprehensive step-by-step video tutorial detailing the above process (the utilization of Particle as a signer within Account Kit). This video can be found here, and the associated written walkthrough can be found here.