Particle Network

Particle Network is an L1 unifying all chains through Universal Accounts. It has deployed its Wallet Abstraction stack on peaq and agung, which brings social logins and account abstraction to the ecosystem. With Particle Network’s SDKs, applications built on peaq can onboard users into ERC-4337 smart contract wallets through familiar Web2 accounts such as Google, Twitter, email, and phone.

Overview

Particle Network’s Wallet Abstraction stack is available through SDKs for more than nine frameworks and platforms. This page covers the basic flow of building a React web application on peaq that onboards users into ERC-4337 smart accounts through social logins. To try Particle Network for yourself, head over to their web demo. A complete demo repository containing the code covered on this page is on GitHub.

Integration options

Particle Network’s Wallet Abstraction stack can be used through several mechanisms, each varying in complexity and integration flow:

Particle Connect, a custom connection kit (similar to RainbowKit) that handles both social logins and Web3 wallet connections. Available for Web, Unity, Android, iOS, Flutter, and React Native.
Particle Auth, the primary library for social logins, through either a standard modal provided by Particle or lower-level shortcuts within your own interface.

Both introduce social logins to your application. Tying account abstraction (ERC-4337) into them requires Particle Network’s standalone AA SDK, which uses Particle’s native Bundler and Paymaster deployed on peaq and agung. This guide uses Particle Auth alongside the AA SDK. It focuses on Particle Auth Core, the React SDK for web applications. For other platforms, see Particle Network’s documentation.

Part 1: Installation

Working with Particle Auth Core alongside Particle’s AA SDK involves the installation of a few core libraries:

@particle-network/auth-core-modal, the primary mechanism for social logins.
@particle-network/aa, for generating and assigning ERC-4337 smart accounts to the traditional accounts (EOAs) created through social login.
@particle-network/chains, for using peaq.

To install these libraries, run one of the two following commands:

yarn add @particle-network/auth-core-modal @particle-network/aa @particle-network/chains
# OR
npm install @particle-network/auth-core-modal @particle-network/aa @particle-network/chains

Part 2: Configuration

Both @particle-network/auth-core-modal and @particle-network/aa are configured independently, but both need the same three values from the Particle dashboard:

projectId
clientKey
appId

Collectively, these values authenticate each SDK. To retrieve them:

Log in or sign up to the Particle dashboard.
Create a new project.
Within this project, create an application.
Copy the Project ID, Client Key, and App ID from the dashboard. If applicable, save these to environment variables within your application.

Configuring Particle Auth means initializing its core React component, AuthCoreContextProvider. This component wraps the application in which you use Particle Auth and, beyond the values above, carries parameters for customizing the embedded wallet modal and specifying the smart account implementation. After importing AuthCoreContextProvider from @particle-network/auth-core-modal, open it within your JSX and use the options property for configuration. It takes the following values:

projectId, clientKey, and appId. These are the values you found on the Particle dashboard.
wallet, a collection of properties for configuring the embedded wallet modal that optionally shows after a user logs in with their social account. wallet contains:
- visible, a Boolean dictating whether the embedded wallet interface is shown post-login. If true, this materializes by default through a button placed near the bottom right of the application.
- customStyle, which, in this example, takes supportChains, an array of chain objects that dictate the blockchains supported within the embedded wallet modal. To lock this to peaq, import Peaq (peaq mainnet, chain ID 3338) or PeaqAgungTestnet from @particle-network/chains.
erc4337, used for specifying a Smart Account implementation to be shown within the embedded wallet modal rather than the EOA. If visible is false on wallet, ignore this property. erc4337 contains:
- name, the name of the Smart Account implementation used within your application. For both peaq and agung, this should be 'SIMPLE'.
- version, the version of the Smart Account implementation referenced in name. Only '1.0.0' is supported with 'SIMPLE'.

With these parameters defined, AuthCoreContextProvider looks like the following example (the index.tsx file of a create-react-app project):

// index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Peaq, PeaqAgungTestnet } from '@particle-network/chains';
import { AuthCoreContextProvider } from '@particle-network/auth-core-modal';
import App from './App'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId: process.env.REACT_APP_PROJECT_ID, // --
        clientKey: process.env.REACT_APP_CLIENT_KEY, // From https://dashboard.particle.network
        appId: process.env.REACT_APP_APP_ID, // --
        erc4337: {
          name: 'SIMPLE',
          version: '1.0.0',
        },
        wallet: {
          visible: true,
          customStyle: {
              supportChains: [PeaqAgungTestnet],
          }
        }
      }}
    >
    <App /> // Where Particle Auth will be used
      </AuthCoreContextProvider>
  </React.StrictMode>
)

Particle Network’s AA SDK is configured in a similar way, but rather than being initialized through a React component, @particle-network/aa is configured within the same component where you use Particle Auth. Its key object is SmartAccount, which, once initialized, manages the user’s smart account end to end. After configuring Particle Auth Core, define provider from the useEthereum hook (imported from @particle-network/auth-core-modal). provider is the EIP-1193 provider object needed to configure an attached smart account. Pass it to a new instance of SmartAccount, along with an object containing:

projectId, clientKey, and appId, as previously defined in AuthCoreContextProvider.
aaOptions, containing:
- accountContracts, a collection of the Smart Account implementations you intend to support. For peaq, this should just be:
  - SIMPLE, an array of objects which takes:
    - chainIds, an array of chain IDs (integers) for the blockchain(s) you’ll be using the Smart Account on.
    - version, the version of the Smart Account you’ll use; in the case of SIMPLE, this should be '1.0.0'.

Defining an instance of SmartAccount looks like the snippet below:

// App.tsx
import { useEthereum, useConnect, useAuthCore } from '@particle-network/auth-core-modal';
import { PeaqAgungTestnet } from '@particle-network/chains';
import { AAWrapProvider, SmartAccount, SendTransactionMode } from '@particle-network/aa';
import { ethers } from 'ethers';
const App = () => {
  const { provider } = useEthereum(); // EIP-1193 provider

  const smartAccount = new SmartAccount(provider, {
    projectId: process.env.REACT_APP_PROJECT_ID,
    clientKey: process.env.REACT_APP_CLIENT_KEY,
    appId: process.env.REACT_APP_APP_ID,
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [PeaqAgungTestnet.id], version: '1.0.0' }]
      }
    }
  });
}

smartAccount is the central source for controlling and reading data from the smart account attached to the user’s social login. Using Particle Auth, users are onboarded through Web2 social accounts such as Google, Twitter, and email. To initiate social logins programmatically, use the useConnect hook from @particle-network/auth-core-modal. useConnect exposes the connect function, which handles social logins. It takes the following parameters:

socialType, the specific social login mechanism to be opened. If this is left as a blank string (''), a generalized interface opens, allowing a user to enter their email, choose an external social account, and so on. A string such as 'google' or 'twitter' opens that provider directly.
chain, the blockchain to be connected to. This should be an object from @particle-network/chains, either Peaq or PeaqAgungTestnet in this case.

Below is an example implementation of connect:

// App.tsx
const App = () => {
  const { connect, disconnect } = useConnect();

  const handleLogin = async (authType) => {
    if (!userInfo) {
      await connect({
        socialType: authType, // 'google', 'twitter', etc. - can also be ''
        chain: PeaqAgungTestnet, // or Peaq
      });
    }
  };

  ...

  disconnect(); // Often mapped to an element within your JSX
}

After logging in, provider is populated and, by proxy, SmartAccount is initialized. At this point you can execute transactions.

Part 4: Transaction Execution

Transactions can be executed with @particle-network/aa in one of two ways: through the instance of SmartAccount directly, or through an external Web3 library such as Ethers or Web3.js.

Option 1: Using `SmartAccount`

Instances of SmartAccount have methods for constructing and executing transactions, otherwise known as UserOperations (within the ERC-4337 standard):

sendTransaction
sendUserOperation
sendSignedUserOperation
buildUserOperation
getFeeQuotes
signUserOperation

These vary in granularity. This example uses the most straightforward one, sendTransaction. For the others, see Particle Network’s documentation. sendTransaction constructs and executes any standard transaction, just as you would with Ethers, Web3.js, or a related library. Transactions are constructed with typical parameters such as to, value, and data. Upon calling sendTransaction on your SmartAccount instance, the user is asked to confirm the transaction through an in-app popup, after which it is executed on-chain.

// App.tsx
const App = () => {
  ...

  // Executing a burn of 0.001 AGUNG
  const executeUserOp = async () => {
    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001"),
    };
    const txResponse = smartAccount.sendTransaction(tx)

    return txResponse;
  };
}

Option 2: Using Ethers

More commonly, an instance of SmartAccount is used to construct an instance of Ethers (or Web3.js, viem, and so on), for a more standardized mechanism of programmatic interaction. This is done by building an intermediary EIP-1193 provider object with AAWrapProvider from @particle-network/aa, using your instance of SmartAccount. Plug this into an object such as new ethers.providers.Web3Provider and you can interact with the smart account directly through Ethers:

// App.tsx
const App = () => {
  ...

  // Ethers provider construction
  const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");
}

From this point, your Ethers instance constructs and executes transactions as normal, automatically routing signatures to the embedded wallet generated through social login.

Full example

Below is an application component that implements all of the code snippets above:

// App.tsx
import { useEthereum, useConnect, useAuthCore } from '@particle-network/auth-core-modal';
import { PeaqAgungTestnet } from '@particle-network/chains';
import { AAWrapProvider, SmartAccount, SendTransactionMode } from '@particle-network/aa';
import { ethers } from 'ethers';
const App = () => {
  const { connect, disconnect } = useConnect();
  const { provider } = useEthereum();

  // Smart Account configuration
  const smartAccount = new SmartAccount(provider, {
    projectId: process.env.REACT_APP_PROJECT_ID,
    clientKey: process.env.REACT_APP_CLIENT_KEY,
    appId: process.env.REACT_APP_APP_ID,
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [PeaqAgungTestnet.id], version: '1.0.0' }]
      }
    }
  });

  // Ethers provider construction
  const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");

  // Facilitating social login
  const handleLogin = async (authType) => {
    if (!userInfo) {
      await connect({
        socialType: authType,
        chain: PeaqAgungTestnet,
      });
    }
  };

  // Executing a burn of 0.001 AGUNG
  const executeUserOp = async () => {
    const signer = customProvider.getSigner();
    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001"),
    };
    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();

    return txReceipt;
  };
}

A demo application containing this code is on GitHub. To learn more about Particle Network and its SDKs:

Documentation provided by Particle.

About

Build

SDK Reference

Particle Network

Overview

Integration options

Part 1: Installation

Part 2: Configuration

Part 4: Transaction Execution

Option 1: Using `SmartAccount`

Option 2: Using Ethers

Full example

​Overview

​Integration options

​Part 1: Installation

​Part 2: Configuration

​Part 3: Social Login

​Part 4: Transaction Execution

​Option 1: Using SmartAccount

​Option 2: Using Ethers

​Full example

Overview

Integration options

Part 1: Installation

Part 2: Configuration

Part 3: Social Login

Part 4: Transaction Execution

Option 1: Using `SmartAccount`

Option 2: Using Ethers

Full example