Upgrade needed to @particle-network/connectKit

[TABASCOatw]

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)