tabascoatw/particle-connect-boilerplate

Boilerplate demo application for facilitating wallet connection with Particle Connect

Particle Connect Boilerplate

⚡️ Boilerplate for a Particle Connect implementation with Google, phone, and email Particle Auth integration alongside various EVM and Solana wallet providers.

Built using Particle Connect, TypeScript, and Web3.js

🔌 Particle Connect

Particle Connect is a simple collection of wallet adapters and components capable of facilitating connection with Particle Auth (Web2 logins), and various third-party wallet providers (Web3 logins).

🔑 Particle Auth

Particle Auth, a component of Particle Network's Wallet-as-a-Service, enables seamless onboarding to an application-embedded MPC-TSS/AA wallet facilitated by social login, such as Google, GitHub, email, phone number, etc.

👉 Try the demo: https://web-demo.particle.network/connectKit

👉 Learn more about Particle Network: https://particle.network

🛠️ Quickstart

Clone this repository

git clone https://github.com/TABASCOatw/particle-connect-boilerplate.git

Install dependencies

yarn install

OR

npm install

Set environment variables

This project requires a number of keys from Particle Network and WalletConnect to be defined in .env. The following should be defined:

• REACT_APP_APP_ID, the ID of the corresponding application in your Particle Network dashboard.
• REACT_APP_PROJECT_ID, the ID of the corresponding project in your Particle Network dashboard.
• REACT_APP_CLIENT_KEY, the client key of the corresponding project in your Particle Network dashboard.
• REACT_APP_WALLETCONNECT_PROJECT_ID, the project ID of the corresponding project in your WalletConnect dashboard

Start the project

npm run dev

OR

yarn dev

Originally featured in "Supercharging UX in 3, 2, and 6 minutes"

particle-connect-boilerplate's Issues

Upgrade needed to `@particle-network/connectKit`

Description

particle-connect-boilerplate is a simple example/boilerplate application showcasing the implementation of Particle Connect, Particle Network's in-house connection modal, within an isolated environment.

Particle Connect facilitates both Web2 onboarding through social logins with Particle Auth, and Web3 onboarding through support for various external wallets such as MetaMask, WalletConnect, etc.

Recently, a more modern version of Particle Connect was released which uses the revamped Particle Auth SDK (Particle Auth Core). This demo still uses the old Particle Connect (@particle-network/connect and @particle-network/connect-react-ui) and should be upgraded to use @particle-network/connectKit for a far easier integration experience.

Motivation

@particle-network/connectKit is easier to integrate and has improved overall UX through the usage of Particle Auth Core (more stable, true-embedded interfaces, etc.). Thus it's important that this demo application is upgraded to showcase this rather than @particle-network/connect and @particle-network/connect-react-ui.

Changed Needed

Currently, App.tsx (and if you'd like, App-Solana.tsx) implements the entirety of the logic for Particle Connect, including configuration and whatnot. Thus, with the transition to @particle-network/connectKit, the application will need to be split between index.tsx (for configuration) and App.tsx (for core application logic, such as the balance retrieval and sample signature button).

The existing logic within App.tsx will need to be shifted to instead leverage hooks from @particle-network/connectKit for most functions, although this should be simple given the usage of a custom EIP-1193 provider with Web3.js.

See the following resources for more information on this:

• https://docs.particle.network/developers/connect-service/sdks/web/connect-with-auth-core (docs)
• https://github.com/TABASCOatw/particle-avalanche-connect-demo (demo implementation of @particle-network/connectKit)

Tasks

• Remove @particle-network/connect and @particle-network/connect-react-ui
• Configure Particle Auth Core and Particle Connect within index.tsx (using @particle-network/connectKit)
• Refactor App.tsx to use hooks derived from @particle-network/connectKit (such as is done within particle-avalanche-connect-demo)