Skip to content

Commit caec4e8

Browse files
soos3dsoos3d
committed
Update particle-network.md
Update the Particle Network wallet docs to the new Particle Connect SDK.
1 parent fd29499 commit caec4e8

File tree

1 file changed

+168
-46
lines changed

1 file changed

+168
-46
lines changed

‎docs/tools/wallets/particle-network.md‎

Lines changed: 168 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,199 @@
11
!!! caution "Content disclaimer"
22
Please view the third-party content disclaimer [here](https://github.com/0xPolygon/polygon-docs/blob/main/CONTENT_DISCLAIMER.md).
33

4-
Particle Network's Wallet Abstraction services enable universal, Web2-adjacent onboarding and interactions. Its core technology, [Smart Wallet-as-a-Service](https://blog.particle.network/announcing-our-smart-wallet-as-a-service-modular-stack-upgrading-waas-with-erc-4337) (WaaS) aims to onboard users into MPC-secured smart accounts supporting any chain. It also allows developers to offer an improved user experience through modular, fully customizable EOA/AA embedded wallets. Particle supports its Smart Wallet-as-a-Service through a Modular L1 powering chain abstraction, acting as a settlement layer across chains for a seamless multi-chain experience.
4+
Particle Network's Wallet Abstraction services facilitate user onboarding and interactions that bridge Web2 and Web3. At its core is [Smart Wallet-as-a-Service (WaaS)](https://developers.particle.network/landing/wallet-abstraction/waas/overview), designed to onboard users into MPC-secured smart accounts that support any blockchain. This service offers developers enhanced user experiences through modular, fully customizable EOA/AA embedded wallets.
55

6-
Through APIs and SDKs available on both mobile and desktop platforms, developers can integrate Particle's Smart Wallet-as-a-Service to enable secure key generation and management initiated by Web2 logins, with the capacity to be customized and implemented in a way that matches the specific needs of a given application.
6+
Developers can integrate Particle's Smart Wallet-as-a-Service via APIs and SDKs for mobile and desktop. This enables secure key generation and management initiated by social or Web3 logins.
77

8-
Additionally, across a variety of EVM chains, including Polygon, Particle's Smart Wallet-as-a-Service can facilitate full-stack, modular implementation of Account Abstraction- handling key management.
8+
Additionally, across various EVM chains, including Polygon, Particle's Smart Wallet-as-a-Service can facilitate full-stack, modular implementation of Account Abstraction- handling key management.
99

10-
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](https://apps.apple.com/us/app/particle-crypto-wallet/id1632425771) or [web](https://wallet.particle.network) application. Particle Wallet offers a range of features, including a toggleable ERC-4337 mode, 1inch-powered swaps, LI.FI-powered bridging, and other standard and miscellaneous functions.
10+
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](https://apps.apple.com/us/app/particle-crypto-wallet/id1632425771) or [web](https://wallet.particle.network) application, and it can be integrated via various SDKs. This page will cover [Particle Connect](https://developers.particle.network/api-reference/connect/desktop/web).
11+
12+
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.
1113

1214
- **Type**: Non-custodial.
15+
1316
- **Private Key Storage**: User’s local device/encrypted and stored with Particle.
17+
1418
- **Communication to Ethereum Ledger**: Mixed/Particle.
19+
1520
- **Key management mechanism**: MPC-TSS.
1621

17-
## Integrating Particle Auth
22+
## Integrating Particle Connect
1823

19-
The [Particle Auth](https://developers.particle.network/reference/auth-web) SDK represents the primary method of facilitating connection (wallet generation or login) and interaction with Particle.
24+
The [Particle Connect](https://developers.particle.network/api-reference/connect/desktop/web) 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.
2025

21-
#### Install dependencies
26+
### Install dependencies
2227

2328
```js
24-
yarn add @particle-network/auth @particle-network/provider
29+
yarn add @particle-network/connectkit viem@^2
2530
```
2631

2732
OR
2833

2934
```js
30-
npm install --save @particle-network/auth @particle-network/provider
35+
npm install @particle-network/connectkit viem@^2
36+
3137
```
3238

33-
#### Configure particle
34-
35-
Now that you've installed the initial dependencies from Particle Network, you'll need to head over to the [Particle Network dashboard](https://dashboard.particle.network/#/login) to create a project & application so that you can acquire the required keys/IDs (`projectId`, `clientKey`, and `appId`) for configuration.
36-
37-
````js
38-
import { ParticleNetwork } from "@particle-network/auth";
39-
import { ParticleProvider } from "@particle-network/provider";
40-
import Web3 from "web3";
41-
42-
const particle = new ParticleNetwork({
43-
projectId: "xx",
44-
clientKey: "xx",
45-
appId: "xx",
46-
chainName: "polygon", //optional: current chain name, default Ethereum.
47-
chainId: "137", //optional: current chain id, default 1.
48-
wallet: { //optional: by default, the wallet interface is displayed in the bottom right corner of the webpage as an embedded popup.
49-
displayWalletEntry: true, //show wallet when connecting with particle.
50-
uiMode: "dark", //optional: light or dark, if not set, the default is the same as web auth.
51-
supportChains: [{ id: 137, name: "Polygon"}, { id: 1, name: "Ethereum"}], // optional: web wallet support chains.
52-
customStyle: {}, //optional: custom wallet style
53-
},
54-
securityAccount: { //optional: particle security account config
55-
//prompt set payment password. 0: None, 1: Once(default), 2: Always
56-
promptSettingWhenSign: 1,
57-
//prompt set master password. 0: None(default), 1: Once, 2: Always
58-
promptMasterPasswordSettingWhenLogin: 1
39+
### Configure particle Connect
40+
41+
Now that you've installed the initial dependencies, you'll need to head over to the [Particle Network dashboard](https://dashboard.particle.network/#/login) to create a project & application so that you can acquire the required keys/IDs (`projectId`, `clientKey`, and `appId`) for configuration.
42+
43+
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.
44+
45+
Here is an example of a `Connectkit.tsx` file (based on Next.js) exporting the `ParticleConnectkit` component:
46+
47+
````ts
48+
"use client";
49+
50+
import React from "react";
51+
import { ConnectKitProvider, createConfig } from "@particle-network/connectkit";
52+
import { authWalletConnectors } from "@particle-network/connectkit/auth";
53+
import type { Chain } from "@particle-network/connectkit/chains";
54+
// embedded wallet start
55+
import { EntryPosition, wallet } from "@particle-network/connectkit/wallet";
56+
// embedded wallet end
57+
// aa start
58+
import { aa } from "@particle-network/connectkit/aa";
59+
// aa end
60+
// evm start
61+
import { polygon, polygonAmoy } from "@particle-network/connectkit/chains";
62+
import {
63+
evmWalletConnectors,
64+
passkeySmartWallet,
65+
} from "@particle-network/connectkit/evm";
66+
// evm end
67+
68+
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID as string;
69+
const clientKey = process.env.NEXT_PUBLIC_CLIENT_KEY as string;
70+
const appId = process.env.NEXT_PUBLIC_APP_ID as string;
71+
const walletConnectProjectId = process.env
72+
.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string;
73+
74+
if (!projectId || !clientKey || !appId) {
75+
throw new Error("Please configure the Particle project in .env first!");
76+
}
77+
78+
const config = createConfig({
79+
projectId,
80+
clientKey,
81+
appId,
82+
appearance: {
83+
// optional, sort wallet connectors
84+
connectorsOrder: ["passkey", "social", "wallet"],
85+
recommendedWallets: [
86+
{ walletId: "metaMask", label: "Recommended" },
87+
{ walletId: "coinbaseWallet", label: "Popular" },
88+
],
89+
language: "en-US",
5990
},
91+
walletConnectors: [
92+
authWalletConnectors({
93+
authTypes: ["google", "apple", "twitter", "github"], // Optional, restricts the types of social logins supported
94+
}),
95+
// evm start
96+
evmWalletConnectors({
97+
// TODO: replace it with your app metadata.
98+
metadata: {
99+
name: "Connectkit Demo",
100+
icon:
101+
typeof window !== "undefined"
102+
? `${window.location.origin}/favicon.ico`
103+
: "",
104+
description: "Particle Connectkit Next.js Scaffold.",
105+
url: typeof window !== "undefined" ? window.location.origin : "",
106+
},
107+
walletConnectProjectId: walletConnectProjectId,
108+
connectorFns: [passkeySmartWallet()],
109+
multiInjectedProviderDiscovery: false,
110+
}),
111+
112+
// evm end
113+
],
114+
plugins: [
115+
// embedded wallet start
116+
wallet({
117+
visible: true,
118+
entryPosition: EntryPosition.BR,
119+
}),
120+
// embedded wallet end
121+
122+
// aa config start
123+
// With Passkey auth use Biconomy or Coinbase
124+
aa({
125+
name: "BICONOMY",
126+
version: "2.0.0",
127+
}),
128+
// aa config end
129+
],
130+
chains: [polygon, polygonAmoy],
60131
});
61132

62-
const particleProvider = new ParticleProvider(particle.auth);
63-
window.web3 = new Web3(particleProvider);
133+
// Wrap your application with this component.
134+
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
135+
return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
136+
};
64137
````
65138

66-
#### Facilitating login/connection
67-
68-
````js
69-
if (!particle.auth.isLogin()) {
70-
// Request user login if needed, returns current user info
71-
const userInfo = await particle.auth.login();
139+
Then, wrap your application with the `ParticleConnectkit` component. Here is an example of a `layout.tsx` file:
140+
141+
```ts
142+
import { ParticleConnectkit } from '@/connectkit';
143+
import type { Metadata } from 'next';
144+
import { Inter } from 'next/font/google';
145+
import './globals.css';
146+
147+
const inter = Inter({ subsets: ['latin'] });
148+
149+
export const metadata: Metadata = {
150+
title: 'Particle Connectkit App',
151+
description: 'Generated by create next app',
152+
};
153+
154+
export default function RootLayout({
155+
children,
156+
}: Readonly<{
157+
children: React.ReactNode;
158+
}>) {
159+
return (
160+
<html lang="en">
161+
<body className={inter.className}>
162+
<ParticleConnectkit>{children}</ParticleConnectkit>
163+
</body>
164+
</html>
165+
);
72166
}
73-
````
167+
```
168+
169+
### Facilitating login/connection
170+
171+
With Particle Connect configured, you can enable social logins in your application using the `ConnectButton` component.
172+
173+
```ts
174+
import { ConnectButton, useAccount } from '@particle-network/connectkit';
175+
176+
export const App = () => {
177+
const { address, isConnected, chainId } = useAccount();
178+
179+
// Standard ConnectButton utilization
180+
return (
181+
<div>
182+
<ConnectButton />
183+
{isConnected && (
184+
<>
185+
<h2>Address: {address}</h2>
186+
<h2>Chain ID: {chainId}</h2>
187+
</>
188+
)}
189+
</div>
190+
);
191+
};
192+
193+
```
194+
195+
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](https://developers.particle.network/api-reference/connect/desktop/web#key-react-hooks-for-particle-connect) documentation.
74196

75-
From this point, you can utilize `web3.js` as usual via `window.web3`. Signatures, confirmations, and other interactions will be routed to the embedded Particle interface, provided that a user is connected.
197+
## Particle Connect Quickstart
76198

77-
The functionality of this SDK, alongside the various other SDKs & APIs that Particle offers, extends far. You can learn more about integrating and interacting with Particle [here](https://docs.particle.network/getting-started/get-started).
199+
Explore the [Particle Connect Quickstart](https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart) in the Particle Network documentation for a step-by-step guide on starting and configuring a new project.

0 commit comments

Comments
 (0)