Particle Network Smart Wallet-as-a-Service¶

Introduction¶

Particle Network is a Smart Wallet-as-a-Service provider that allows developers to improve user experience through modular and customizable Externally Owned Account (EOA) and Account Abstraction (AA) embedded wallet components.

One major component of Particle's Smart Wallet-as-a-Service stack that streamlines user onboarding is Particle Auth, which can be used to onboard users via familiar Web2 accounts—such as Google accounts, email addresses, and phone numbers. This is enabled by using Multi-Party Computation-based Threshold Signature Scheme (MPC-TSS) technology for key management.

For a complete overview of Particle's stack, please check out Particle's blog post: Introducing Our Smart Wallet-as-a-Service Modular Stack.

Particle supports Moonbeam, Moonriver, and the Moonbase Alpha TestNet through both standard EOA interactions and native ERC-4337 SimpleAccount implementations, facilitating full-stack account abstraction.

Specifically, Particle Network's Moonbeam integration is made up of a few components:

• Particle Network Wallet-as-a-Service - this is the flagship Wallet-as-a-Service product offered by Particle Network, enabling application-embedded wallets powered by MPC-TSS to facilitate a seamless, Web2-like onboarding and interaction experience
• Particle Network Modular AA Stack - beyond the base EOA-centric interaction that happens by default through Particle's Wallet-as-a-Service, Particle also has a native modular AA stack for the implementation of ERC-4337 account abstraction on Moonbeam. This means inherent flexibility with the smart account, bundler, and paymaster you use in tandem with Particle's Wallet-as-a-Service when building AA-enabled applications

In this guide, you'll go through a step-by-step example of utilizing Particle Network's Smart Wallet-as-a-Service.

Create an Application¶

To use Particle Network's Smart Wallet-as-a-Service on Moonbeam, you'll need to begin by creating an account on the Particle Network dashboard and spinning up an application.

1. Navigate to the Particle Network dashboard, then sign up or log in

   

2. Once logged in, click Add New Project to create a new project

   

3. Enter the project name and click Save

   

4. From the project's dashboard, scroll down to the Your Apps section and create a new app by selecting iOS, Android, or Web and providing the requested information

   

5. Finally, copy the Project ID, Client Key, and App ID

   

Install Dependencies¶

To integrate Particle Network within your Moonbeam application, you'll need to install a number of dependencies, the specifics of which depend on whether you intend on purely using the default EOA generated by Particle's Wallet-as-a-Service, or if you intend to leverage an attached smart account.

For both EOA and smart account utilization, install @particle-network/auth.

npm install @particle-network/auth

yarn add @particle-network/auth

If you'd like to natively use ERC-4337 AA, also install @particle-network/aa.

npm install @particle-network/aa

yarn add @particle-network/aa

When creating an AA, you'll need to pass it a provider. You can use a Particle Provider or any EVM wallet provider. To use a Particle Provider, you'll need to install @particle-network/provider.

npm install @particle-network/provider

yarn add @particle-network/provider

Configure Particle Network¶

With an application made and dependencies installed, you can move on to configuring your project.

To configure your project, you'll need to:

1. Import ParticleNetwork from @particle-network/auth
2. Import Moonbeam from @particle-network/chains, as you'll need Moonbeam's chain name and ID in the next step

3. Initialize ParticleNetwork using your project credentials that you retrieved from your dashboard and Moonbeam's chain name and ID, and, optionally, you can configure wallet display and security settings

   Note

   You can use dotenv to securely store your project credentials.

import { ParticleNetwork } from '@particle-network/auth';
import { Moonbeam } from '@particle-network/chains';

// Project ID, Client Key, and App ID from https://dashboard.particle.network
const config = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  clientKey: process.env.REACT_APP_CLIENT_KEY,
  appId: process.env.REACT_APP_APP_ID,
};

const particle = new ParticleNetwork({
  ...config,
  chainName: Moonbeam.name,
  chainId: Moonbeam.id,
  wallet: { displayWalletEntry: true },
});

Create an ERC-4337 Account Abstraction¶

If you want to use an ERC-4337 AA, you'll need to take a couple additional steps:

1. Import SmartAccount from @particle-network/aa and ParticleProvider from @particle-network/auth
2. Initialize a ParticleProvider to handle wallet connect requests using the particle instance you created in the previous set of steps
3. Initialize a SmartAccount using the provider, your project credentials, and the AA implementation and configuration. For Moonbeam, you'll use either the SIMPLE or BICONOMY implementation (if you're using BICOMOMY, set version to 2.0.0) and pass in Moonbeam's chain ID
4. Enable ERC-4337 mode, specifying the SIMPLE or BICONOMY implementation

import { ParticleNetwork } from '@particle-network/auth';
import { Moonbeam } from '@particle-network/chains';
import { ParticleProvider } from '@particle-network/provider';
import { SmartAccount } from '@particle-network/aa';

// Project ID, Client Key, and App ID from https://dashboard.particle.network
const config = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  clientKey: process.env.REACT_APP_CLIENT_KEY,
  appId: process.env.REACT_APP_APP_ID,
};

const particle = new ParticleNetwork({
  ...config,
  chainName: Moonbeam.name,
  chainId: Moonbeam.id,
  wallet: { displayWalletEntry: true },
});

// If using ERC-4337 AA
const provider = new ParticleProvider(particle.auth);
const smartAccount = new SmartAccount(provider, {
  ...config,
  aaOptions: {
    accountContracts: {
      SIMPLE: [ // Or BICONOMY
        {
          version: '1.0.0', // If you're using BICONOMY, set to 2.0.0
          chainIds: [Moonbeam.id],
        },
      ],
    },
  },
});

// Sets wallet UI to use AA mode
particle.setERC4337({
  name: 'SIMPLE', // or BICONOMY
  version: '1.0.0', // If you're using BICONOMY, set to 2.0.0
});

At this point, you've signed up and created an application, installed all required dependencies, and configured ParticleNetwork, along with SmartAccount, if applicable.

Wrap an EIP-1193 Provider¶

You can wrap your AA in a custom provider if you want to interact with an Ethereum library, such as Ethers.js or Web3.js.

To do so, you'll need to take the following steps:

1. Import AAWrapProvider from '@particle-network/aa'
2. Import the library of your choice
3. Initialize a AAWrapProvider using the AA you created in the previous section
4. Wrap the EIP-1193 provider using the library of your choice and the AAWrapProvider

import { ParticleNetwork } from '@particle-network/auth';
import { Moonbeam } from '@particle-network/chains';
import { ParticleProvider } from '@particle-network/provider';
import { SmartAccount, AAWrapProvider } from '@particle-network/aa';
import { ethers } from 'ethers';

// Project ID, Client Key, and App ID from https://dashboard.particle.network
const config = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  clientKey: process.env.REACT_APP_CLIENT_KEY,
  appId: process.env.REACT_APP_APP_ID,
};

const particle = new ParticleNetwork({
  ...config,
  chainName: Moonbeam.name,
  chainId: Moonbeam.id,
  wallet: { displayWalletEntry: true },
});

// If using ERC-4337 AA
const provider = new ParticleProvider(particle.auth);
const smartAccount = new SmartAccount(provider, {
  ...config,
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '1.0.0',
          chainIds: [Moonbeam.id],
        },
      ],
    },
  },
});

// Sets wallet UI to use AA mode
particle.setERC4337({
  name: 'SIMPLE',
  version: '1.0.0',
});

// Uses custom EIP-1193 AA provider
const wrapProvider = new AAWrapProvider(smartAccount);
const customProvider = new ethers.BrowserProvider(wrapProvider);

import { ParticleNetwork } from '@particle-network/auth';
import { Moonbeam } from '@particle-network/chains';
import { ParticleProvider } from '@particle-network/provider';
import { SmartAccount, AAWrapProvider } from '@particle-network/aa';
import { Web3 } from 'web3';

// Project ID, Client Key, and App ID from https://dashboard.particle.network
const config = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  clientKey: process.env.REACT_APP_CLIENT_KEY,
  appId: process.env.REACT_APP_APP_ID,
};

const particle = new ParticleNetwork({
  ...config,
  chainName: Moonbeam.name,
  chainId: Moonbeam.id,
  wallet: { displayWalletEntry: true },
});

// If using ERC-4337 AA
const provider = new ParticleProvider(particle.auth);
const smartAccount = new SmartAccount(provider, {
  ...config,
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '1.0.0',
          chainIds: [Moonbeam.id],
        },
      ],
    },
  },
});

// Sets wallet UI to use AA mode
particle.setERC4337({
  name: 'SIMPLE',
  version: '1.0.0',
});

// Uses custom EIP-1193 AA provider
const wrapProvider = new AAWrapProvider(smartAccount);
const customProvider = new Web3(wrapProvider);

Example of Utilization¶

With the aforementioned established, Particle Network can be used similarly, as shown in the example application below.

Specifically, this application creates a smart account on Moonbeam MainNet through social login, then uses it to send a test transaction of 0.001 GLMR.

import React, { useState, useEffect } from 'react';
import { ParticleNetwork } from '@particle-network/auth';
import { ParticleProvider } from '@particle-network/provider';
import { Moonbeam } from '@particle-network/chains';
import { AAWrapProvider, SmartAccount } from '@particle-network/aa';
import { ethers } from 'ethers';

// Retrieved from the Particle Network dashboard
const config = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  clientKey: process.env.REACT_APP_CLIENT_KEY,
  appId: process.env.REACT_APP_APP_ID,
};

// Core configuration
const particle = new ParticleNetwork({
  ...config,
  chainName: Moonbeam.name,
  chainId: Moonbeam.id,
  wallet: { displayWalletEntry: true },
});

// ERC-4337 AA configuration
const smartAccount = new SmartAccount(new ParticleProvider(particle.auth), {
  ...config,
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '1.0.0',
          chainIds: [Moonbeam.id],
        },
      ],
    },
  },
});

// Uses custom EIP-1193 AA provider
const customProvider = new ethers.BrowserProvider(
  new AAWrapProvider(smartAccount)
);

// Sets wallet UI to use AA mode
particle.setERC4337({
  name: 'SIMPLE',
  version: '1.0.0',
});

const App = () => {
  const [userInfo, setUserInfo] = useState(null);
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (userInfo) {
      fetchBalance();
    }
  }, [userInfo]);

  const fetchBalance = async () => {
    const address = await smartAccount.getAddress();
    const balance = await customProvider.getBalance(address);
    setBalance(ethers.formatEther(balance));
  };

  const handleLogin = async (preferredAuthType) => {
    const user = !particle.auth.isLogin()
      ? await particle.auth.login({ preferredAuthType })
      : particle.auth.getUserInfo();
    setUserInfo(user);
  };

  // Sample burn transaction
  const executeUserOp = async () => {
    const signer = customProvider.getSigner();
    const tx = {
      to: '0x000000000000000000000000000000000000dEaD',
      value: ethers.parseEther('0.001'),
    };
    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();
    console.log('Transaction hash:', txReceipt.transactionHash);
  };

  return (
    <div className="App">
      {!userInfo ? (
        <div>
          <button onClick={() => handleLogin('google')}>
            Sign in with Google
          </button>
          <button onClick={() => handleLogin('twitter')}>
            Sign in with Twitter
          </button>
        </div>
      ) : (
        <div>
          <h2>{userInfo.name}</h2>
          <div>
            <small>{balance}</small>
            <button onClick={executeUserOp}>Execute User Operation</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

The full demo repository containing the above code can be found in the particle-moonbeam-demo GitHub repository.

That concludes the brief introduction to Particle's Smart Wallet-as-a-Service stack and how to get started with Particle on Moonbeam. For more information, you can check out Particle Network's documentation.