particle-network / particle-web-demo

Particle Network Web SDK Demo.

Particle Web Demo

This repository is Particle Demo source code. It supports Solana and EVM-compatiable chains, more chains and more features coming soon! Learn more visit Particle Network.

🔥 Currently hosted here.

Quick start

Add below config to ./packages/web-demo/.env file, Replace 'xxx' with the new values created in the Particle Dashboard.

REACT_APP_PROJECT_ID=xxx
REACT_APP_CLIENT_KEY= xxx
REACT_APP_APP_ID=xxx

# if use waleltconnect, set walletconnect project id, created in https://walletconnect.com/
REACT_APP_WALLETCONNECT_PROJECT_ID=xxx

• Install Node.js.
• Install Yarn
• Install dotenv-cli
• Run yarn
• Run yarn start:web-demo

Documentation

1. Particle ConnectKit Service
2. Particle Auth Service
3. Particle Wallet Service
4. Particle Node Service

⚡️ For full documentation, visit Docs.

Features

Particle Auth is a simple self-custodial auth infra for Web3 apps and wallets. We support mobile number and email login, providing users with a simple operating experience. Their login account is then associated with a blockchain wallet, which is secured with a "Threshold Signatures vault".

• Speedy logins: the log-in process is no different from that of a Web2.0 login, which greatly lowers the barriers to entry and improves user experience.
• Non-custodial private key infrastructure: Particle Network provides MPC (Multi-Party Computation)-based TSS (Threshold Signatures Scheme). With TSS, each party creates an independent key. They then forge the vault's lock together in a modular way, in which each party shapes a part of the lock that corresponds to its key. The user is always in control of ownership and access to their cryptographic key pair.
• Custom UI: customize Particle Auth's UI so that it blends directly into your application, you can brand in the Dashboard.
• Signature Service: a full signature service, including Send Transaction, Sign Message and so on. Your users can view the detailed data of each signature.

Examples

🔥ConnectKit

Modular wallet adapters and components for EVM & Solana chains. Manage wallet and custom RPC requests. Particle Connect is the best way to onboard any user for your dApp. Join our Discord community to give us feedback.

• with create-react-app
• with next.js
• with vue
• react custom connectKit

You can run these demos locally.

👉 Live Demo

RainbowKit

If you use RainbowKit connect wallet, you can add particle auth quickly. Refer to the following demo.

🌈 particle + rainbowkit + next

👉 Live Demo

Visit Docs for more details.

Web3Modal

Add particle to web3modal. Refer to the following demo.

✅ react + web3modal

👉 Live Demo

Web3React

Use Particle with web3-react. Refer to the following demo.

with web3-react

Give Feedback

Please report bugs or issues to particle-web-demo/issues

You can also join our Discord.

particle-web-demo's Issues

how to use switchChain to change network?

When i use switchChain(ChainInfo) to switch,it shows error like this:
TypeError: Cannot read properties of undefined (reading 'cachedProviderId').
My codes:
const { switchChain } = useConnectKit()
const { renderChains } = useSwitchChains()
const toChangeNetwork = ()=>{
switchChain(renderChains[1])
}
in App.tsx:
<ModalProvider
options={{
projectId: process.env.NEXT_PUBLIC_PARTICAL_PROJECT_ID,
clientKey: process.env.NEXT_PUBLIC_PARTICAL_CLIENT_KEY,
appId: process.env.NEXT_PUBLIC_PARTICAL_APP_ID,
chains: [
Ethereum,
EthereumGoerli
],
particleWalletEntry: {
displayWalletEntry: false
},
securityAccount: {
promptSettingWhenSign: 1,
promptMasterPasswordSettingWhenLogin: 1
},
wallets: evmWallets({
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
showQrModal: false
})
}}
theme="dark"
language="en"
walletSort={['Wallet', 'Particle Auth']}
particleAuthSort={['email', 'google']}
>
......

Update wagmi starter with Wagmi v2

The current example uses v1 and it's not compatible with Wagmi v2. Quickly looking at the migration guides on Wagmi website didn't help much to be honest.

Thanks!

demo vue doesn't work

Hello,

I've cloned the vuejs demo part but it doesn't work for me, I get this error 'socket.ts:19 Uncaught ReferenceError: global is not defined at socket.ts:19:12'
Did I forget something?
Can you help me?
Your solution was recommended to me for the creation of my dapp and I'm very interested in using particle.network.

how can particle work with web3-react together?

i want use particle wallet integrate with web3-react ,but don't know how to do ,i hope get your support

Can't switch chain

Click any network and click "switch network" in metamask, will should error below, and switch chain fail.

web-demo getting 8005 error (User not login error)

• Issue: Keep showing "User not login" error toast while try to make contract call, check in log it's 8005 error
• Environment: localhost:3000 (by running yarn start:web-demo)
• Side notes
  • I can do the same contract call with same parameters on the official site https://web-demo.particle.network/ using the same account
  • I've setup .env file properly from Particle dashboard data

2023-09-28.2.25.47.mov

Do not working with RainbowKitAuthenticationProvider

Hello. I can't find "rainbowkit-ext", so making issue here.

We use RainbowKitAuthenticationProvider for our custom authorization: verify Ethereum message and log in or not.
Everything is work with default wallets by Rainbow Kit: Metamask, Trust Wallet, WalletConnect protocol also good.

But particle wallets not working with these approach. If we remove RainbowKitAuthenticationProvider - particle wallet connecting. Problems appear when we need to verify with send and sign message. There was "Error signing message. Please retry" in Rainbow Kit. Error from particle: "Unknown RPC error: Details: User not login, Version: [email protected]".

Interesting, that if I sign in with just email and code, and want to verify and sign message - everything works :)
But, if I use particleWallet({ chains, authType: "google" }) or apple or etc, it is not working.
Also, there is another error when I try to sign in with particleWallet({ chains }) and choose google or apple etc, there was an error "System error, Param not found."

Please, help :)

How the secret share is managed on the server side for Particle's TSS wallet solution?

starter demo for web3-react v8?

Hello, could you provide a starter demo for web3-react v8?

Is there a demo of Vue?

Is there a demo of Vue?