Web (JavaScript/TypeScript) - Connect

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

'use client';

import { ConnectKitProvider, createConfig } from '@particle-network/connectkit';
import { authWalletConnectors } from '@particle-network/connectkit/auth';
import { mainnet, solana } 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';

//Retrived from https://dashboard.particle.network
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID as string;
const clientKey = process.env.NEXT_PUBLIC_CLIENT_KEY as string;
const appId = process.env.NEXT_PUBLIC_APP_ID as string;
const walletConnectProjectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string;

if (!projectId || !clientKey || !appId) {
    throw new Error('Please configure the Particle project in .env first!');
}

const config = createConfig({
    projectId,
    clientKey,
    appId,
    appearance: {
        // Optional, collection of properties to alter the appearance of the connection modal
        // Optional, label and sort wallets (to be shown in the connection modal)
        recommendedWallets: [
            { walletId: 'metaMask', label: 'Recommended' },
            { walletId: 'coinbaseWallet', label: 'popular' },
        ],
        splitEmailAndPhone: false, // Optional, displays Email and phone number entry separately
        collapseWalletList: false, // Optional, hide wallet list behind a button
        hideContinueButton: false, // Optional, remove "Continue" button underneath Email or phone number entry
        connectorsOrder: ['email', 'phone', 'social', 'wallet'], //  Optional, sort connection methods (index 0 will be placed at the top)
        language: 'en-US', // Optional, also supported ja-JP, zh-CN, zh-TW, and ko-KR
        mode: 'light', // Optional, changes theme between light, dark, or auto (which will change it based on system settings)
        theme: {
            '--pcm-accent-color': '#ff4d4f',
            // ... other options
        },
        logo: 'https://...',
        filterCountryCallingCode: (countries) => {
            // Optional, whitelist or blacklist phone numbers from specific countries
            return countries.filter((item) => item === 'US');
        },
    },
    walletConnectors: [
        evmWalletConnectors({
            metadata: { name: 'My App', icon: '', description: '', url: '' }, // Optional, this is Metadata used by WalletConnect and Coinbase
            walletConnectProjectId: 'Replace with your WalletConnect Project ID', // optional, retrieved from https://cloud.walletconnect.com
        }),
        authWalletConnectors({
            // Optional, configure this if you're using social logins
            authTypes: ['email', 'google', 'apple', 'twitter', 'github'], // Optional, restricts the types of social logins supported
            fiatCoin: 'USD', // Optional, also supports CNY, JPY, HKD, INR, and KRW
            promptSettingConfig: {
                // Optional, changes the frequency in which the user is asked to set a master or payment password
                // 0 = Never ask
                // 1 = Ask once
                // 2 = Ask always, upon every entry
                // 3 = Force the user to set this password
                promptMasterPasswordSettingWhenLogin: 1,
                promptPaymentPasswordSettingWhenSign: 1,
            },
        }),
        solanaWalletConnectors(), // Optional, you need to configure it when using Solana
    ],
    plugins: [
        wallet({
            // Optional configurations for the attached embedded wallet modal
            entryPosition: EntryPosition.BR, // Alters the position in which the modal button appears upon login
            visible: true, // Dictates whether or not the wallet modal is included/visible or not
            customStyle: {
                displayTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"], // Display a custom token within the wallet modal
                priorityTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"],
            },
        }),
    ],
    chains: [mainnet, solana],
});

// Export ConnectKitProvider to be used within your index or layout file (or use createConfig directly within those files).
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
    return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
};

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

// Import the ConnectKitProvider configuration (exported as ParticleConnectKit)
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',
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <ParticleConnectkit>{children}</ParticleConnectkit>
            </body>
        </html>
    );
}

/* Hide the chain selector elements */
.sc-dUMaFF.iLJvQa {
  display: none;
}

.sc-dKGrn.cHiobV {
  display: none;
}

import { useAccount } from '@particle-network/connectkit';

const { isConnected, isConnecting, isDisconnected, isReconnecting } = useAccount();

if (isConnected) {
    // Truthy indicates a successful login, active session
}

import { useAccount, useSwitchChain } from '@particle-network/connectkit';

const { switchChain, switchChainAsync, error, status } = useSwitchChain();
// The wallet’s current active chain id.
const { chainId } = useAccount();

await switchChainAsync({ chainId: 1 });
// or
switchChain({ chainId: 1 });

import { useWallets } from '@particle-network/connectkit';
import { ethers } from 'ethers';

const [primaryWallet] = useWallets();

const EOAprovider = await primaryWallet.connector.getProvider();

const customProvider = new ethers.BrowserProvider(
    EOAprovider as Eip1193Provider, "any"
);

// Read (balance retrieval)
const balance = await customProvider.getBalance(address);

// Write (sending a transaction)
const signer = customProvider.getSigner();
const tx = {
    to: '0x000000000000000000000000000000000000dEaD',
    value: ethers.utils.parseEther('0.01'),
};
const txResponse = await signer.sendTransaction(tx);

import { SolanaChain, useWallets, useAccount } from '@particle-network/connectkit';

const [primaryWallet] = useWallets();

// Current chain ID being used
// Address tied to the connected wallet (or social login)
const { chainId, address } = useAccount();


const walletClient = primaryWallet.getWalletClient();
// Examples of EVM wallet methods
// Send a transaction
walletClient.sendTransaction({...})
// Sign a message
walletClient.signMessage({...})
// Sign typed data
walletClient.signTypedData({...})


const solanaWallet = primaryWallet.getWalletClient<SolanaChain>();
// Examples of Solana wallet methods
// Send a transaction
solanaWallet.sendTransaction({...})
// Sign a message
solanaWallet.signMessage({...})
// Sign a transaction (without sending)
solanaWallet.signTransaction({...})

import { useWallets, useAccount } from '@particle-network/connectkit';
import { parseEther, type Address } from 'viem';

const [primaryWallet] = useWallets();
const { chain, address } = useAccount();

const executeTx = async () => {
    // Prepare the transaction object
    const tx = {
        to: recipientAddress as Address,
        value: parseEther('0.01'),
        data: '0x', // No contract interaction, so data is empty
        chain: chain,
        account: address as Address,
    };

    // Get the wallet client and send the transaction
    const walletClient = primaryWallet.getWalletClient();
    const transactionResponse = await walletClient.sendTransaction(tx);

    console.log('Transaction sent:', transactionResponse);
};

import { useWallets, useAccount, usePublicClient, type SolanaChain } from '@particle-network/connectkit';
import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';

const [primaryWallet] = useWallets();
const solanaWallet = primaryWallet?.getWalletClient<SolanaChain>();
const publicClient = usePublicClient<SolanaChain>();

const executeTx = async () => {
    const publicKey = solanaWallet.publicKey;
    // Prepare the transaction object
    const tx = new Transaction();
    tx.add(
        SystemProgram.transfer({
            fromPubkey: publicKey,
            toPubkey: new PublicKey(recipientAddress),
            lamports: amount,
        })
    );

    const { blockhash, lastValidBlockHeight } = await publicClient.getLatestBlockhash({
        commitment: 'finalized',
    });

    tx.recentBlockhash = blockhash;
    tx.lastValidBlockHeight = lastValidBlockHeight;
    tx.feePayer = publicKey;

    const transactionResponse = await solanaWallet.sendTransaction(tx);
    console.log('Transaction sent:', transactionResponse);
};

import { usePublicClient } from '@particle-network/connectkit';

export const App = () => {
    // Init public client
    const publicClient = usePublicClient();

    // Fetch the balance of an account
    const fetchBalance = async () => {
        const balanceResponse = await publicClient?.getBalance({
            address,
        });
    };
};

import { usePublicClient, SolanaChain } from '@particle-network/connectkit';

export const App = () => {
    // Init public client
    const publicClient = usePublicClient<SolanaChain>();

    const [primaryWallet] = useWallets();
    const solanaWallet = primaryWallet?.getWalletClient<SolanaChain>();

    // Fetch the balance of an account
    const fetchBalance = async () => {
        const balanceResponse = await publicClient?.getBalance(solanaWallet.publicKey);
    };
};

import { useAccount, useParticleAuth, useWallets } from '@particle-network/connectkit';
import { useState, useEffect } from 'react';

export const App = () => {
    const { getUserInfo } = useParticleAuth();
    const { isConnected } = useAccount();

    // Retrieve the primary wallet from the Particle Wallets
    const [primaryWallet] = useWallets();

    // Store userInfo in a useState to use it in your app
    const [userInfo, setUserInfo] = useState<any>(null);

    useEffect(() => {
        const fetchUserInfo = async () => {
            // Use walletConnectorType as a condition to avoid account not initialized errors
            if (primaryWallet?.connector?.walletConnectorType === 'particleAuth') {
                const userInfo = await getUserInfo();
                setUserInfo(userInfo);
            }
        };

        fetchUserInfo();
    }, [isConnected, getUserInfo]);

    return <h2 className="text-style">Name: {userInfo.name || 'N/A'}</h2>;
};