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的智能钱包即服务的分步教程。
创建应用程序¶
要在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
。
npm install @particle-network/auth
yarn add @particle-network/auth
如果您想要原生使用ERC-4337账户抽象,还需要安装@particle-network/aa
。
npm install @particle-network/aa
yarn add @particle-network/aa
创建抽象账户后,您需要将其传给提供商。您可以使用Particle或任何EVM钱包提供商。如果您使用的是Particle提供商,您需要安装@particle-network/provider
。
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提供商
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文档网站。