@particle-network/connectkit on Fuse Demo

Particle Connect on Fuse

Particle Connect enables a unified modal driving connection with social logins (through Particle Auth) and standard Web3 wallets, creating an equally accessible experience for Web3 natives and traditional consumers. Particle Connect is an all-in-one SDK capable of handling end-to-end onboarding and wallet connection.

This app enables you to log in using social logins or Web3 methods via Particle Connect and interact with the Fuse mainnet and testnet. You can view your account information and send transfer transactions to any address you input in the UI.

Built using:

• Particle Connect 2.0
• ethers.js V6.x.x
• TypeScript
• Tailwind CSS

Find the Particle Connect SDK docs.

---

👉 Learn more about Particle Network.

🛠️ Quickstart

Clone this repository

git clone https://github.com/Particle-Network/connectkit-fuse-demo

Move into the app directory

cd particle-connect

Install dependencies

yarn install

Or

npm install

Set environment variables

This project requires several keys from Particle Network to be defined in .env. The following should be defined:

• NEXT_PUBLIC_PROJECT_ID, the ID of the corresponding application in your Particle Network dashboard.
• NEXT_PUBLIC_CLIENT_KEY, the ID of the corresponding project in your Particle Network dashboard.
• NEXT_PUBLIC_APP_ID, the client key of the corresponding project in your Particle Network dashboard.

Start the project

npm run dev

Or

yarn dev

What is Fuse

Fuse is a decentralized blockchain platform designed to make everyday payments and decentralized finance (DeFi) accessible to mainstream users. It offers fast, low-cost transactions and a user-friendly infrastructure for creating and managing token-based economies.

Optimized for mobile applications, Fuse helps traditional finance integrate into blockchain technology, making it ideal for developers building payment-focused dApps and micro-economies.

Build with Particle Connect (from scratch)

To get started with Particle Connect in your application, follow these steps:

🛠 Configuration & Integration

This is based on a standard Next JS application initialized with npx create-next-app@latest.

1. Install the SDK:

   Begin by installing the ConnectKit SDK:

   yarn add @particle-network/connectkit viem@^2

2. Create Connectkit.tsx and Configure the SDK:

Create a new component named Connectkit.tsx to set up your Particle Connect configuration.

Required Configurations:

• projectId, clientKey, and appId — Obtain these from the Particle dashboard.
• chains — Specify the supported chains for your dApp.
• walletConnectors — Define the wallets you want to support.

Optional Configurations:

• theme and language for the connection modal UI.
• Additional appearance customizations.

'use client';

import { ConnectKitProvider, createConfig } from '@particle-network/connectkit';
import { authWalletConnectors } from '@particle-network/connectkit/auth';
import { fuse, fuseSparknet } from '@particle-network/connectkit/chains';
import { evmWalletConnectors } from '@particle-network/connectkit/evm';
import { injected as solaInjected, solanaWalletConnectors } from '@particle-network/connectkit/solana';
import { wallet, EntryPosition } from '@particle-network/connectkit/wallet';
import React from 'react';

const config = createConfig({
    projectId: 'Replace with your Particle Project ID',
    clientKey: 'Replace with your Particle Client Key', // Retrieved from https://dashboard.particle.network
    appId: 'Replace with your Particle App ID',
    appearance: { 
        recommendedWallets: [
            { walletId: 'metaMask', label: 'Recommended' },
            { walletId: 'coinbaseWallet', label: 'Popular' },
        ],
        splitEmailAndPhone: false, 
        collapseWalletList: false, 
        hideContinueButton: false, 
        connectorsOrder: ['email', 'phone', 'social', 'wallet'], 
        language: 'en-US', 
        mode: 'light', 
        theme: {
            '--pcm-accent-color': '#ff4d4f',
        },
        logo: 'https://...',
        filterCountryCallingCode: (countries) => {
            return countries.filter((item) => item === 'US');
        },
    },
    walletConnectors: [
        evmWalletConnectors({
            metadata: { name: 'My App', icon: '', description: '', url: '' },
            walletConnectProjectId: 'Replace with your WalletConnect Project ID', 
        }),
        authWalletConnectors({
            authTypes: ["email", "google", "apple", "twitter", "github"],
            fiatCoin: "USD",
            promptSettingConfig: {
                promptMasterPasswordSettingWhenLogin: 1,
                promptPaymentPasswordSettingWhenSign: 1,
            },
        }),
        solanaWalletConnectors(), 
    ],
    plugins: [
        wallet({
            entryPosition: EntryPosition.BR, 
            visible: true,
        }),
    ],
    chains: [fuse, fuseSparknet],
});

export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
    return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
};

3. Wrap Your App:

   Import and wrap your application with the ParticleConnectKit component (export of ConnectKitProvider) in your index or layout file. Here’s an example for a layout.tsx file:

   import type { Metadata } from "next";
   import { Inter } from "next/font/google";
   import "./globals.css";
   import { ParticleConnectkit } from "./components/Connectkit";
   
   const inter = Inter({ subsets: ["latin"] });
   
   export const metadata: Metadata = {
     title: "Particle Connect",
     description: "Demo showcasing a quickstart for Particle Connect 2.0 on Fuse",
   };
   
   export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
       <html lang="en">
         <body className={inter.className}>
           <ParticleConnectkit>{children}</ParticleConnectkit>
         </body>
       </html>
     );
   }

4. Add a Connection Button:

   Include the Connect button in your main App component to allow users to log in via Particle Connect.

   Example integration:

   import { ConnectButton, useAccount } from '@particle-network/connectkit';
   
   export const App = () => {
       const { address, isConnected, chainId } = useAccount();
   
       return (
           <>
           {isConnected ? (
               <>
               <h2>Address: {address}</h2>
               <h2>Chain ID: {chainId}</h2>
               </>
           ) : (
               <ConnectButton />
           )}
           </>
       );
   };

Particle Connect features

Find the features available in the Particle Connect SDK docs.