Skip to content

Commit 804d946

Browse files
hsutaiyuhsutaiyu
authored
Merge pull request 0xPolygon#2455 from soos3d/docs/update-particle-network
Docs/update particle network
2 parents 70dc4a0 + 42712d4 commit 804d946

File tree

2 files changed

+102
-48
lines changed

2 files changed

+102
-48
lines changed

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

Lines changed: 101 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,131 @@
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 SDKs facilitate 2-click user onboarding into EOAs/SCAs through passkeys, social logins, or typical Web3 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 Wallet Abstraction suite via APIs and SDKs for mobile and desktop, acting as an all-in-one method of bringing users into your Polygon application, regardless of their background (Web3 natives, brand new users, and so on).
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 SDKs can facilitate full-stack, modular implementation of ERC-4337 Account Abstraction.
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
3136
```
3237

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
59-
},
38+
### Configure Particle Connect
39+
40+
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.
41+
42+
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.
43+
44+
Here is an example of a `Connectkit.tsx` file (based on Next.js) exporting the `ParticleConnectkit` component:
45+
46+
````ts
47+
"use client";
48+
49+
import React from "react";
50+
import { ConnectKitProvider, createConfig } from "@particle-network/connectkit";
51+
import { authWalletConnectors } from "@particle-network/connectkit/auth";
52+
import { polygon, polygonAmoy } from "@particle-network/connectkit/chains";
53+
54+
const config = createConfig({
55+
projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
56+
clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
57+
appId: process.env.NEXT_PUBLIC_APP_ID!,
58+
walletConnectors: [authWalletConnectors({})],
59+
chains: [polygon, polygonAmoy],
6060
});
6161

62-
const particleProvider = new ParticleProvider(particle.auth);
63-
window.web3 = new Web3(particleProvider);
62+
// Wrap your application with this component.
63+
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
64+
return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
65+
};
6466
````
6567

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();
68+
!!! note ""
69+
This is a minimal version of the ConnectKit.tsx file, providing just enough to get started. For complete details and full implementation guidelines, refer to the [Particle Network documentation](https://developers.particle.network/api-reference/connect/desktop/web#configuration).
70+
71+
Then, wrap your application with the `ParticleConnectkit` component. Here is an example of a `layout.tsx` file:
72+
73+
```ts
74+
import { ParticleConnectkit } from '@/connectkit';
75+
import type { Metadata } from 'next';
76+
import { Inter } from 'next/font/google';
77+
import './globals.css';
78+
79+
const inter = Inter({ subsets: ['latin'] });
80+
81+
export const metadata: Metadata = {
82+
title: 'Particle Connectkit App',
83+
description: 'Generated by create next app',
84+
};
85+
86+
export default function RootLayout({
87+
children,
88+
}: Readonly<{
89+
children: React.ReactNode;
90+
}>) {
91+
return (
92+
<html lang="en">
93+
<body className={inter.className}>
94+
<ParticleConnectkit>{children}</ParticleConnectkit>
95+
</body>
96+
</html>
97+
);
7298
}
73-
````
99+
```
100+
101+
### Facilitating login/connection
102+
103+
With Particle Connect configured, you can enable social logins in your application using the `ConnectButton` component.
104+
105+
```ts
106+
import { ConnectButton, useAccount } from '@particle-network/connectkit';
107+
108+
export const App = () => {
109+
const { address, isConnected, chainId } = useAccount();
110+
111+
// Standard ConnectButton utilization
112+
return (
113+
<div>
114+
<ConnectButton />
115+
{isConnected && (
116+
<>
117+
<h2>Address: {address}</h2>
118+
<h2>Chain ID: {chainId}</h2>
119+
</>
120+
)}
121+
</div>
122+
);
123+
};
124+
125+
```
126+
127+
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.
74128

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.
129+
## Particle Connect Quickstart
76130

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).
131+
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.

‎mkdocs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -548,7 +548,7 @@ nav:
548548
- Venly widget: tools/wallets/venly/venly-widget.md
549549
- Fortmatic: https://docs.fortmatic.com/
550550
- Openfort: tools/wallets/openfort.md
551-
- Particle network: tools/wallets/particle-network.md
551+
- Particle Network: tools/wallets/particle-network.md
552552
- Portis: tools/wallets/portis.md
553553
- Torus: tools/wallets/torus.md
554554
- WalletConnect: tools/wallets/walletconnect.md

0 commit comments

Comments
 (0)