Particle Network的智能钱包即服务¶

概览¶

Particle Network是一个智能钱包即服务提供商，它允许开发者通过使用可定制的模块化外部拥有账户（Externally Owned Account，简称EOA）和账户抽象（Account Abstraction，简称AA）嵌入式钱包组件来提升用户体验。

Particle智能钱包即服务堆栈的其中一个重要组件是Particle Auth，该组件可通过用户熟悉的Web2账户（例如谷歌账户、邮箱地址和电话号码）简化用户入门流程。这是通过使用基于多方计算的阈值签名方案（MPC-TSS）技术进行密钥管理来实现的。

想要了解关于Particle堆栈的完整版介绍，请参考Particle的博客文章：介绍Particle智能钱包即服务模块化堆栈。

Particle通过标准EOA交互和原生ERC-4337 SimpleAccount实现支持Moonbeam、Moonriver和Moonbase Alpha测试网，从而促进全堆栈账户抽象。

具体来说，Particle Network的Moonbeam集成由以下组件组成：

Particle Network Wallet-as-a-Service - 这是一个由Particle Network提供的钱包即服务旗舰产品，支持由MPC-TSS支持的应用程序嵌入式钱包，从而实现无缝且类似Web2入门和交互的体验。
Particle Network Modular AA Stack - 除了以EOA为中心的基本交互之外（此交互默认情况下通过Particle的钱包即服务实现），Particle还具有原生模块化账户抽象堆栈，用于Moonbeam上ERC-4337账户抽象的实现。这意味着在构建支持账户抽象的应用程序时，您可以将智能账户、bundler和paymaster与Particle的钱包即服务结合使用，从而获得固有的灵活性

Particle Network Smart WaaS map

本教程中，我们将展示使用Particle Network的智能钱包即服务的分步教程。

创建应用程序¶

要在Moonbeam上使用Particle Network的智能钱包即服务，首先您需要通过在Particle Network数据面板创建账户并启动应用程序。

前往Particle Network数据面板，然后注册或登录
登陆后，点击Add New Project创建新项目
输入项目名称并点击Save保存
在项目的数据面板处，往下滑动找到Your Apps部分，选择iOS、Android或Web并提供要求的信息以创建新的App
最后，复制Project ID、Client Key和App ID

安装依赖项¶

要将Particle Network集成至Moonbeam，您需要安装一系列的依赖项，具体取决于您是否要完全使用Particle的钱包即服务生成的默认EOA，或使用附加的智能账户。

无论是使用EOA还是智能合约，都需要先安装@particle-network/auth。

npmyarn

npm install @particle-network/auth

yarn add @particle-network/auth

如果您想要原生使用ERC-4337账户抽象，还需要安装@particle-network/aa。

npmyarn

npm install @particle-network/aa

yarn add @particle-network/aa

创建抽象账户后，您需要将其传给提供商。您可以使用Particle或任何EVM钱包提供商。如果您使用的是Particle提供商，您需要安装@particle-network/provider。

npmyarn

npm install @particle-network/provider

yarn add @particle-network/provider

配置Particle Network¶

创建好应用程序并安装完依赖项后，您可以开始配置项目了。

配置项目需要执行以下步骤：

从 @particle-network/auth导入ParticleNetwork
您将在下一个步骤用到Moonbeam的链名称和ID，因此您需要先从@particle-network/chains导入Moonbeam
使用您的项目凭据以及Moonbeam的链名称和ID初始化ParticleNetwork，并且您可以在这里选择配置钱包显示和安全设置

注意事项

您可以使用dotenv安全存储您的项目凭证。

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

创建ERC-4337账户抽象¶

如果您想要使用ERC-4337账户抽象，您需要执行一些额外的步骤：

从@particle-network/aa和@particle-network/auth导入SmartAccount
使用您在上述步骤创建的particle实例，初始化ParticleProvider以处理钱包连接请求
使用提供商、项目凭证以及账户抽象实现和配置来初始化SmartAccount。对于Moonbeam来说，您需要使用simple实现并传入Moonbeam链ID
启用ERC-4337模式，指定SIMPLE实现

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

到现在为止，您已经注册并创建了一个应用程序，安装了所有所需依赖项，同时配置了ParticleNetwork和SmartAccount（若适用）。

包装EIP-1193提供商¶

如果您要与Ethers.js或Web3.js等以太坊库交互，您可以将账户抽象包装在自定义的提供商中。

为此，您需要执行以下步骤：

从'@particle-network/aa'导入AAWrapProvider
自行选择导入所需要的库
使用上述步骤中创建的账户抽象初始化AAWrapProvider
使用所选择的库和AAWrapProvider包装EIP-1193提供商

Ethers.jsWeb3.js

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);

使用示例¶

完成上述操作后，您可以根据上述类似步骤使用Particle Network，如下方示例应用程序所示：

具体来说，该应用程序通过社交登录在Moonbeam主网上创建一个智能账户，然后使用该应用程序发送一笔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;

要查看包含上述代码的完整演示代码库，请访问particle-moonbeam-demo GitHub repository。

这就是关于Particle智能钱包即服务堆栈以及如何在Moonbeam上开始使用Particle的简要介绍。想要了解更多信息，请参考Particle Network文档网站。

本网站的所有信息由第三方提供，仅供参考之用。Moonbeam文档网站(https://docs.moonbeam.network/)上列出和描述的任何项目与Moonbeam立场无关。Moonbeam Foundation不保证网站信息的准确性、完整性或真实性。如使用或依赖本网站信息，需自行承担相关风险，Moonbeam Foundation不承担任何责任和义务。这些材料的所有陈述和/或意见由提供方个人或实体负责，与Moonbeam Foundation立场无关，概不构成任何投资建议。对于任何特定事项或情况，应寻求专业权威人士的建议。此处的信息可能会包含或链接至第三方提供的信息与/或第三方服务（包括任何第三方网站等）。这类链接网站不受Moonbeam Foundation控制。Moonbeam Foundation对此类链接网站的内容（包括此类链接网站上包含的任何信息或资料）概不负责也不认可。这些链接内容仅为方便访客而提供，Moonbeam Foundation对因您使用此信息或任何第三方网站或服务提供的信息而产生的所有责任概不负责。

Last update: January 25, 2024
| Created: December 19, 2023