Particle Network

Content disclaimer

Please view the third-party content disclaimer here.

Particle Network’s Wallet Abstraction SDKs facilitate 2-click user onboarding into EOAs/SCAs through passkeys, social logins, or typical Web3 wallets.

Developers can integrate Particle’s Wallet Abstraction suite via APIs and SDKs for mobile and desktop, acting as an all-in-one method of bringing users into your Polygon application, regardless of their background (Web3 natives, brand new users, and so on).

Additionally, across various EVM chains, including Polygon, Particle’s SDKs can facilitate full-stack, modular implementation of ERC-4337 Account Abstraction.

Particle Wallet itself is available either in an application-embedded format, depending on the type of integration a specific developer chooses, or standalone through the mobile or web application, and it can be integrated via various SDKs. This page will cover Particle Connect.

Particle Connect is a React-based SDK that offers a unified solution for managing user onboarding through social logins (via Particle Auth) and standard Web3 wallets. This creates a consistent and accessible experience for Web3-native users and traditional consumers.

Type: Non-custodial.
Private Key Storage: User’s local device/encrypted and stored with Particle.
Communication to Ethereum Ledger: Mixed/Particle.
Key management mechanism: MPC-TSS.

Integrating Particle Connect¶

The Particle Connect SDK is the primary tool for facilitating wallet creation, login, and interaction with Particle. It provides a unified modal for connecting through social logins (via Particle Auth) or traditional Web3 wallets, ensuring an accessible experience for both Web3 users and mainstream consumers.

Install dependencies¶

yarn add @particle-network/connectkit viem@^2

OR

npm install @particle-network/connectkit viem@^2

Configure Particle Connect¶

Now that you’ve installed the initial dependencies, you’ll need to head over to the Particle Network dashboard to create a project & application so that you can acquire the required keys/IDs (projectId, clientKey, and appId) for configuration.

After obtaining your project keys, you can configure the SDK by wrapping your application with the ParticleConnectkit component. This allows you to apply customizations and input the project keys.

Here is an example of a Connectkit.tsx file (based on Next.js) exporting the ParticleConnectkit component:

"use client";

import React from "react";
import { ConnectKitProvider, createConfig } from "@particle-network/connectkit";
import { authWalletConnectors } from "@particle-network/connectkit/auth";
import { polygon, polygonAmoy } from "@particle-network/connectkit/chains";

const config = createConfig({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  appId: process.env.NEXT_PUBLIC_APP_ID!,
  walletConnectors: [authWalletConnectors({})],
  chains: [polygon, polygonAmoy],
});

// Wrap your application with this component.
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
  return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
};

This is a minimal version of the ConnectKit.tsx file, providing just enough to get started. For complete details and full implementation guidelines, refer to the Particle Network documentation.

Then, wrap your application with the ParticleConnectkit component. Here is an example of a layout.tsx file:

import { ParticleConnectkit } from '@/connectkit';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Particle Connectkit App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ParticleConnectkit>{children}</ParticleConnectkit>
      </body>
    </html>
  );
}

Facilitating login/connection¶

With Particle Connect configured, you can enable social logins in your application using the ConnectButton component.

import { ConnectButton, useAccount } from '@particle-network/connectkit';

export const App = () => {
    const { address, isConnected, chainId } = useAccount();

    // Standard ConnectButton utilization
    return (
        <div>
            <ConnectButton />
            {isConnected && (
                <>
                    <h2>Address: {address}</h2>
                    <h2>Chain ID: {chainId}</h2>
                </>
            )}
        </div>
    );
};

For managing interactions at the application level after onboarding, @particle-network/connectkit offers various hooks. You can explore all the available hooks in the Particle Connect SDK documentation.

Particle Connect Quickstart¶

Explore the Particle Connect Quickstart in the Particle Network documentation for a step-by-step guide on starting and configuring a new project.