DashboardBlogGitHub

RainbowKit

Suggest Edits

Leveraging Particle Auth within RainbowKit

One of the most widely used methods of implementing Particle Auth is through RainbowKit. By leveraging RainbowKit as the underlying connection mechanism within your application, you can facilitate both Web2-based social logins with Particle Auth (through a custom wagmi connector powered by @particle-network/auth-core-modal) or Web3-native wallet connections. This unification of social logins and external wallet connections is also possible through Particle Connect, although if you'd like to use RainbowKit, including Particle Auth within the list of connection options is simple.

‎

Implementing particleWagmiWallet

If you're already using RainbowKit within your application, you can set up a custom wagmi connector, particleWagmiWallet alongside its respective derivatives, including particleGoogleWallet, particleTwitterWallet, and any other social login implementations that you'd like to include within your RainbowKit instance (through wallets within RainbowKit's connectorsForWallets).

To build custom Particle Auth connectors of this nature, follow the walkthrough below.

Walkthrough

  1. First, set up the particleWagmiWallet connector. You'll first need to create an additional file within your project to hold the custom connector, such as particleWagmiWallet.ts. This file should include the below snippet:

    1. import { type ConnectParam, type EIP1193Provider } from '@particle-network/auth-core';
import type { EVMProvider } from '@particle-network/auth-core-modal/dist/context/evmProvider';
import { ChainNotConfiguredError, createConnector, normalizeChainId } from '@wagmi/core';
import { SwitchChainError, UserRejectedRequestError, getAddress, numberToHex, type ProviderRpcError } from 'viem';

particleWagmiWallet.type = 'particleWallet' as const;
export function particleWagmiWallet(param?: ConnectParam) {
    type Provider = EIP1193Provider;
    type Properties = any;

    return createConnector<Provider, Properties>((config) => ({
        id: 'particleWalletSDK',
        name: 'Particle Wallet',
        type: particleWagmiWallet.type,
        async connect({ chainId }: { chainId: number }) {
            try {
                const provider = await this.getProvider();
                const accounts = (await (provider as EVMProvider).connect(param)).map((x) => getAddress(x));

                provider.on('accountsChanged', this.onAccountsChanged);
                provider.on('chainChanged', this.onChainChanged);
                provider.on('disconnect', this.onDisconnect.bind(this));

                // Switch to chain if provided
                let currentChainId = await this.getChainId();
                if (chainId && currentChainId !== chainId) {
                    const chain = await this.switchChain!({ chainId }).catch((error: any) => {
                        if (error.code === UserRejectedRequestError.code) throw error;
                        return { id: currentChainId };
                    });
                    currentChainId = chain?.id ?? currentChainId;
                }

                return { accounts, chainId: currentChainId };
            } catch (error: any) {
                if (error.code == 4011) throw new UserRejectedRequestError(error as Error);
                throw error;
            }
        },
        async disconnect() {
            const provider = await this.getProvider();

            provider.removeListener('accountsChanged', this.onAccountsChanged);
            provider.removeListener('chainChanged', this.onChainChanged);
            provider.removeListener('disconnect', this.onDisconnect.bind(this));

            await (provider as any)?.disconnect?.();
        },
        async getAccounts() {
            const provider = await this.getProvider();
            return (
                await provider.request({
                    method: 'eth_accounts',
                })
            ).map((x: string) => getAddress(x));
        },
        async getChainId() {
            const provider = await this.getProvider();
            const chainId = await provider.request({ method: 'eth_chainId' });
            return normalizeChainId(chainId);
        },
        async getProvider() {
            if (typeof window === 'undefined') {
                return;
            }

            while (!(window as any).particle?.ethereum) {
                await new Promise((resolve) => setTimeout(() => resolve(true), 100));
            }
            return (window as any).particle?.ethereum;
        },
        async isAuthorized() {
            try {
                const provider = await this.getProvider();
                return (provider as any).isConnected();
            } catch {
                return false;
            }
        },
        async switchChain({ chainId }: { chainId: number }) {
            const chain = config.chains.find((chain) => chain.id === chainId);
            if (!chain) throw new SwitchChainError(new ChainNotConfiguredError());

            const provider = await this.getProvider();
            const chainId_ = numberToHex(chain.id);

            try {
                await provider.request({
                    method: 'wallet_switchEthereumChain',
                    params: [{ chainId: chainId_ }],
                });
                return chain;
            } catch (error) {
                // Indicates chain is not added to provider
                if ((error as ProviderRpcError).code === 4902) {
                    try {
                        await provider.request({
                            method: 'wallet_addEthereumChain',
                            params: [
                                {
                                    chainId: chainId_,
                                    chainName: chain.name,
                                    nativeCurrency: chain.nativeCurrency,
                                    rpcUrls: [chain.rpcUrls.default?.http[0] ?? ''],
                                    blockExplorerUrls: [chain.blockExplorers?.default.url],
                                },
                            ],
                        });
                        return chain;
                    } catch (error) {
                        throw new UserRejectedRequestError(error as Error);
                    }
                }

                throw new SwitchChainError(error as Error);
            }
        },
        onAccountsChanged(accounts: string[]) {
            if (accounts.length === 0) config.emitter.emit('disconnect');
            else
                config.emitter.emit('change', {
                    accounts: accounts.map((x) => getAddress(x)),
                });
        },
        onChainChanged(chain: string) {
            const chainId = normalizeChainId(chain);
            config.emitter.emit('change', { chainId });
        },
        async onDisconnect(_error: any) {
            config.emitter.emit('disconnect');

            const provider = await this.getProvider();
            provider.removeListener('accountsChanged', this.onAccountsChanged);
            provider.removeListener('chainChanged', this.onChainChanged);
            provider.removeListener('disconnect', this.onDisconnect.bind(this));
        },
    }));
}

  2. Initializing connector instances (such as particleGoogleWallet). With the particleWagmiWallet connector set up, you'll need to establish a number of configured (derivative) connector instances to include specific social logins within your RainbowKit instance (these should be placed in the wallets array while configuring connectorsForWallets). An example of this is included below:

    1. import type { Wallet, WalletDetailsParams } from '@rainbow-me/rainbowkit';
import { createConnector } from 'wagmi';
import { googleIcon, particleIcon, twitterIcon } from './icons';
import { particleWagmiWallet } from './particleWagmiWallet';

export const particleWallet = (): Wallet => ({
    id: 'particle',
    name: 'Particle Wallet',
    iconUrl: async () => particleIcon,
    iconBackground: '#fff',
    installed: true,
    createConnector: (walletDetails: WalletDetailsParams) =>
        createConnector(
            (config) =>
                ({
                    ...particleWagmiWallet()(config),
                    ...walletDetails,
                } as any)
        ),
});

export const particleGoogleWallet = (): Wallet => ({
    id: 'particle_google',
    name: 'Google',
    iconUrl: async () => googleIcon,
    iconBackground: '#fff',
    installed: true,
    createConnector: (walletDetails: WalletDetailsParams) =>
        createConnector(
            (config) =>
                ({
                    ...particleWagmiWallet({ socialType: 'google' })(config),
                    ...walletDetails,
                } as any)
        ),
});

export const particleTwitterWallet = (): Wallet => ({
    id: 'particle_twitter',
    name: 'Twitter',
    iconUrl: async () => twitterIcon,
    iconBackground: '#fff',
    installed: true,
    createConnector: (walletDetails: WalletDetailsParams) =>
        createConnector(
            (config) =>
                ({
                    ...particleWagmiWallet({ socialType: 'twitter' })(config),
                    ...walletDetails,
                } as any)
        ),
});


      export const particleIcon =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjkiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAyOSAyOSI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjEiIHkxPSIwLjUiIHgyPSIwIiB5Mj0iMC41IiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzg2NGRlYiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTAyIiBzdG9wLWNvbG9yPSIjZTY0YmUwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZkNGJkZCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGcgaWQ9Iue7hF8xMjI3IiBkYXRhLW5hbWU9Iue7hCAxMjI3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzIwIC01MzcpIj4KICAgIDxyZWN0IGlkPSLnn6nlvaJfNDAwIiBkYXRhLW5hbWU9IuefqeW9oiA0MDAiIHdpZHRoPSIyOSIgaGVpZ2h0PSIyOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIwIDUzNykiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPgogICAgPHBhdGggaWQ9IuakreWchl8zX+aLt+i0nSIgZGF0YS1uYW1lPSLmpK3lnIYgMyDmi7fotJ0iIGQ9Ik0xNjU2LjE4OCwyODAuNzdhMS41MjYsMS41MjYsMCwxLDAsMS41MDcsMS41MjZBMS41MjUsMS41MjUsMCwwLDAsMTY1Ni4xODgsMjgwLjc3Wm0zLjExNC0xLjgxMWExLjUsMS41LDAsMCwwLTEuOS45OCwxLjUzLDEuNTMsMCwwLDAsLjk2OCwxLjkyMywxLjUsMS41LDAsMCwwLDEuOS0uOTgsMS41MywxLjUzLDAsMCwwLS45NjktMS45MjJabTMuNTE2LS43NDhhMS40OTQsMS40OTQsMCwwLDAtMi4xLjMzOCwxLjUzOCwxLjUzOCwwLDAsMCwuMzMzLDIuMTMyLDEuNDk1LDEuNDk1LDAsMCwwLDIuMS0uMzM4LDEuNTM5LDEuNTM5LDAsMCwwLS4zMzMtMi4xMzFabTMuNTcxLjM4OWExLjQ5NCwxLjQ5NCwwLDAsMC0yLjEtLjMzNywxLjUzNywxLjUzNywwLDAsMC0uMzMzLDIuMTMyLDEuNDk0LDEuNDk0LDAsMCwwLDIuMS4zMzgsMS41MzksMS41MzksMCwwLDAsLjMzMy0yLjEzM1ptMy4yNzgsMS40ODhhMS41LDEuNSwwLDAsMC0xLjktLjk4LDEuNTI5LDEuNTI5LDAsMCwwLS45NjcsMS45MjMsMS41LDEuNSwwLDAsMCwxLjkuOTgsMS41MywxLjUzLDAsMCwwLC45NjctMS45MjNabTIuNjY0LDIuNDRhMS41MDcsMS41MDcsMCwxLDAtLjQzNCwxLjA3NywxLjUwNywxLjUwNywwLDAsMCwuNDM0LTEuMDc3Wm0xLjc4OSwzLjE1NGExLjUzLDEuNTMsMCwwLDAtLjk2OC0xLjkyMywxLjUsMS41LDAsMCwwLTEuOS45OCwxLjUzMSwxLjUzMSwwLDAsMCwuOTY4LDEuOTIzLDEuNSwxLjUsMCwwLDAsMS45LS45OFptLjczOCwzLjU1OWExLjUzNywxLjUzNywwLDAsMC0uMzMzLTIuMTMyLDEuNDk1LDEuNDk1LDAsMCwwLTIuMS4zMzgsMS41NCwxLjU0LDAsMCwwLC4zMzMsMi4xMzIsMS40OTUsMS40OTUsMCwwLDAsMi4xMDUtLjMzOFptLS4zODMsMy42MTZhMS41NCwxLjU0LDAsMCwwLC4zMzMtMi4xMzIsMS40OTQsMS40OTQsMCwwLDAtMi4xLS4zMzgsMS41MzcsMS41MzcsMCwwLDAtLjMzMywyLjEzMiwxLjQ5NSwxLjQ5NSwwLDAsMCwyLjEwNS4zMzhabS0xLjQ2OSwzLjMxOWExLjUzLDEuNTMsMCwwLDAsLjk2Ny0xLjkyMywxLjUsMS41LDAsMCwwLTEuOS0uOTgsMS41MywxLjUzLDAsMCwwLS45NjcsMS45MjMsMS41LDEuNSwwLDAsMCwxLjkuOThabS0yLjQwOSwyLjdhMS41MjYsMS41MjYsMCwxLDAtMS41MDYtMS41MjYsMS41MjUsMS41MjUsMCwwLDAsMS41MDYsMS41MjZabS0zLjExNCwxLjgxMWExLjUsMS41LDAsMCwwLDEuOS0uOTgsMS41MywxLjUzLDAsMCwwLS45NjgtMS45MjMsMS41LDEuNSwwLDAsMC0xLjkuOTgsMS41MywxLjUzLDAsMCwwLC45NjgsMS45MjNabS0zLjUxNi43NDhhMS41LDEuNSwwLDAsMCwyLjEwNi0uMzM4LDEuNTM4LDEuNTM4LDAsMCwwLS4zMzQtMi4xMzIsMS40OTUsMS40OTUsMCwwLDAtMi4xLjMzOCwxLjU0LDEuNTQsMCwwLDAsLjMzMywyLjEzMlptLTMuNTcxLS4zODlhMS40OTUsMS40OTUsMCwwLDAsMi4xLjMzOCwxLjUzOCwxLjUzOCwwLDAsMCwuMzM0LTIuMTMyLDEuNSwxLjUsMCwwLDAtMi4xMDYtLjMzOCwxLjUzOSwxLjUzOSwwLDAsMC0uMzMzLDIuMTMyWm0tMy4yNzgtMS40ODhhMS41LDEuNSwwLDAsMCwxLjkuOTgsMS41MywxLjUzLDAsMCwwLC45NjctMS45MjMsMS41LDEuNSwwLDAsMC0xLjktLjk4LDEuNTMxLDEuNTMxLDAsMCwwLS45NjcsMS45MjNabS0yLjY2NC0yLjQ0YTEuNTA4LDEuNTA4LDAsMSwwLC40MzUtMS4wNzhBMS41MDcsMS41MDcsMCwwLDAsMTY1NC40NTUsMjk3LjExNVptNC4zMjUtMTIuOTg4YS45MTYuOTE2LDAsMSwwLC45LjkxNkEuOTE1LjkxNSwwLDAsMCwxNjU4Ljc4MSwyODQuMTI3Wm0xLjkyNi0xLjE3M2EuOS45LDAsMCwwLTEuMTQuNTg4LjkxOS45MTksMCwwLDAsLjU4MSwxLjE1NC45LjksMCwwLDAsMS4xNC0uNTg4LjkxOS45MTksMCwwLDAtLjU4My0xLjE1NFptMi4xOS0uNTE0YS45LjksMCwwLDAtMS4yNjQuMi45MjMuOTIzLDAsMCwwLC4yLDEuMjc5LjkuOSwwLDAsMCwxLjI2My0uMi45MjMuOTIzLDAsMCwwLS4yLTEuMjc5Wm0yLjIzOS4yYS45LjksMCwwLDAtMS4yNjMtLjIuOTIzLjkyMywwLDAsMC0uMiwxLjI3OS45LjksMCwwLDAsMS4yNjMuMi45MjMuOTIzLDAsMCwwLC4yLTEuMjc5Wm0yLjA2OS44ODdhLjkuOSwwLDAsMC0xLjEzOS0uNTg4LjkxOS45MTksMCwwLDAtLjU4MSwxLjE1NC45LjksMCwwLDAsMS4xNC41ODguOTE3LjkxNywwLDAsMCwuNTgtMS4xNTRabTEuNywxLjQ5MWEuOTA5LjkwOSwwLDEsMC0uMjYyLjY0NS45MDkuOTA5LDAsMCwwLC4yNjItLjY0NVptMS4xNiwxLjk0OWEuOTE3LjkxNywwLDAsMC0uNTgtMS4xNTQuOS45LDAsMCwwLTEuMTQuNTg4LjkxNy45MTcsMCwwLDAsLjU4MSwxLjE1NC45LjksMCwwLDAsMS4xMzktLjU4OFptLjUwOCwyLjIxN2EuOTIzLjkyMywwLDAsMC0uMi0xLjI3OS45LjksMCwwLDAtMS4yNjMuMi45MjMuOTIzLDAsMCwwLC4yLDEuMjc5LjkuOSwwLDAsMCwxLjI2My0uMlptLS4xOTQsMi4yNjdhLjkyMy45MjMsMCwwLDAsLjItMS4yNzkuOS45LDAsMCwwLTEuMjY0LS4yLjkyMy45MjMsMCwwLDAtLjIsMS4yNzkuOS45LDAsMCwwLDEuMjYzLjJabS0uODc2LDIuMWEuOTE5LjkxOSwwLDAsMCwuNTgxLTEuMTU0LjkuOSwwLDAsMC0xLjE0LS41ODguOTE5LjkxOSwwLDAsMC0uNTgxLDEuMTU0LjkuOSwwLDAsMCwxLjE0LjU4OFptLTEuNDczLDEuNzE5YS45MTYuOTE2LDAsMSwwLS45LS45MTUuOTE1LjkxNSwwLDAsMCwuOS45MTVabS0xLjkyNiwxLjE3M2EuOS45LDAsMCwwLDEuMTQtLjU4OC45MTkuOTE5LDAsMCwwLS41ODEtMS4xNTQuOS45LDAsMCwwLTEuMTM5LjU4OC45MTcuOTE3LDAsMCwwLC41OCwxLjE1NFptLTIuMTg5LjUxNGEuOS45LDAsMCwwLDEuMjYzLS4yLjkyMy45MjMsMCwwLDAtLjItMS4yNzkuOS45LDAsMCwwLTEuMjYzLjIuOTIzLjkyMywwLDAsMCwuMiwxLjI3OVptLTIuMjQtLjJhLjkuOSwwLDAsMCwxLjI2NC4yLjkyMy45MjMsMCwwLDAsLjItMS4yNzkuOS45LDAsMCwwLTEuMjYzLS4yQS45MjMuOTIzLDAsMCwwLDE2NjEuNjcyLDI5Ni43NTRabS0yLjA2OS0uODg3YS45LjksMCwwLDAsMS4xMzkuNTg4LjkxNy45MTcsMCwwLDAsLjU4MS0xLjE1NC45LjksMCwwLDAtMS4xNC0uNTg4LjkxNy45MTcsMCwwLDAtLjU4LDEuMTU0Wm0tMS43LTEuNDkxYS45LjksMCwxLDAsLjI2MS0uNjQ3QS45LjksMCwwLDAsMTY1Ny45MDYsMjk0LjM3NVptMi41NjMtNy43NDZhLjQ4OC40ODgsMCwxLDAsLjQ4Mi40ODhBLjQ4OC40ODgsMCwwLDAsMTY2MC40NjksMjg2LjYyOVptMS4wNDctLjY0N2EuNDgxLjQ4MSwwLDAsMC0uNjA4LjMxMy40ODkuNDg5LDAsMCwwLC4zMS42MTUuNDgxLjQ4MSwwLDAsMCwuNjA3LS4zMTQuNDkuNDksMCwwLDAtLjMxLS42MTVabTEuMTkzLS4yODhhLjQ3OS40NzksMCwwLDAtLjY3NC4xMDguNDkzLjQ5MywwLDAsMCwuMTA2LjY4Mi40NzkuNDc5LDAsMCwwLC42NzQtLjEwOC40OTEuNDkxLDAsMCwwLS4xMDYtLjY4MlptMS4yMjIuMWEuNDc4LjQ3OCwwLDAsMC0uNjczLS4xMDguNDkzLjQ5MywwLDAsMC0uMTA3LjY4Mi40NzkuNDc5LDAsMCwwLC42NzQuMTA4LjQ5MS40OTEsMCwwLDAsLjEwNi0uNjgzWm0xLjEzMi40NzZhLjQ4LjQ4LDAsMCwwLS42MDctLjMxNC40ODkuNDg5LDAsMCwwLS4zMDkuNjE1LjQ4LjQ4LDAsMCwwLC42MDcuMzE0LjQ4OS40ODksMCwwLDAsLjMwOS0uNjE2Wm0uOTMyLjgwOGEuNDg1LjQ4NSwwLDEsMC0uMTQuMzQ0LjQ4NS40ODUsMCwwLDAsLjE0LS4zNDRabS42NCwxLjA2YS40OS40OSwwLDAsMC0uMzEtLjYxNS40OC40OCwwLDAsMC0uNjA3LjMxNC40OS40OSwwLDAsMCwuMzEuNjE1LjQ4MS40ODEsMCwwLDAsLjYwNy0uMzE0Wm0uMjg0LDEuMjA4YS40OTMuNDkzLDAsMCwwLS4xMDYtLjY4Mi40NzkuNDc5LDAsMCwwLS42NzQuMTA4LjQ5Mi40OTIsMCwwLDAsLjEwNi42ODIuNDc5LjQ3OSwwLDAsMCwuNjc0LS4xMDhabS0uMSwxLjIzN2EuNDkyLjQ5MiwwLDAsMCwuMTA2LS42ODIuNDc5LjQ3OSwwLDAsMC0uNjc0LS4xMDguNDkyLjQ5MiwwLDAsMC0uMTA2LjY4Mi40NzkuNDc5LDAsMCwwLC42NzQuMTA4Wm0tLjQ3MSwxLjE0N2EuNDkuNDksMCwwLDAsLjMxLS42MTUuNDgxLjQ4MSwwLDAsMC0uNjA4LS4zMTQuNDkuNDksMCwwLDAtLjMxLjYxNS40ODEuNDgxLDAsMCwwLC42MDguMzEzWm0tLjguOTQzYS40ODguNDg4LDAsMSwwLS40ODItLjQ4OEEuNDg4LjQ4OCwwLDAsMCwxNjY1LjU1MiwyOTIuNjcyWm0tMS4wNDcuNjQ3YS40ODEuNDgxLDAsMCwwLC42MDgtLjMxNC40OS40OSwwLDAsMC0uMzEtLjYxNS40ODEuNDgxLDAsMCwwLS42MDguMzE0LjQ5LjQ5LDAsMCwwLC4zMS42MTVabS0xLjE5My4yODhhLjQ3OS40NzksMCwwLDAsLjY3NC0uMTA4LjQ5My40OTMsMCwwLDAtLjEwNy0uNjgyLjQ3OC40NzgsMCwwLDAtLjY3My4xMDguNDkxLjQ5MSwwLDAsMCwuMTA2LjY4MlptLTEuMjIyLS4xYS40NzcuNDc3LDAsMCwwLC42NzMuMTA4LjQ5My40OTMsMCwwLDAsLjEwNy0uNjgyLjQ3OS40NzksMCwwLDAtLjY3NC0uMTA4LjQ5MS40OTEsMCwwLDAtLjEwNi42ODJabS0xLjEzMy0uNDc2YS40ODIuNDgyLDAsMCwwLC42MDkuMzE0LjQ4OS40ODksMCwwLDAsLjMwOS0uNjE1LjQ4MS40ODEsMCwwLDAtLjYwOC0uMzE0QS40OS40OSwwLDAsMCwxNjYwLjk1OCwyOTMuMDMyWm0tLjkzMi0uODA4YS40ODUuNDg1LDAsMSwwLC4xNC0uMzQ0QS40ODUuNDg1LDAsMCwwLDE2NjAuMDI1LDI5Mi4yMjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMzMC4wMjcgMjYxLjY4MSkiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDwvZz4KPC9zdmc+Cg==';

export const googleIcon =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOSIgaGVpZ2h0PSIyOSIgdmlld0JveD0iMCAwIDI5IDI5Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNmYmJjMDU7CiAgICAgIH0KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogI2VhNDMzNTsKICAgICAgfQoKICAgICAgLmNscy00IHsKICAgICAgICBmaWxsOiAjMzRhODUzOwogICAgICB9CgogICAgICAuY2xzLTUgewogICAgICAgIGZpbGw6ICM0Mjg1ZjQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSLnu4RfMTEzNiIgZGF0YS1uYW1lPSLnu4QgMTEzNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMyMCAtNTM3KSI+CiAgICA8cmVjdCBpZD0i55+p5b2iXzQwMCIgZGF0YS1uYW1lPSLnn6nlvaIgNDAwIiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIyOSIgaGVpZ2h0PSIyOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIwIDUzNykiLz4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTY3MCIgZGF0YS1uYW1lPSLot6/lvoQgMTY3MCIgY2xhc3M9ImNscy0yIiBkPSJNOS4xMiwyOTQuOTA4YTYuMTU4LDYuMTU4LDAsMCwxLC4zMjUtMS45NjVMNS44LDI5MC4yMTlhMTAuNDYzLDEwLjQ2MywwLDAsMCwwLDkuMzc0bDMuNjQxLTIuNzI5YTYuMTQzLDYuMTQzLDAsMCwxLS4zMjEtMS45NTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxOS4yMjYgMjU2LjU4OSkiLz4KICAgIDxwYXRoIGlkPSLot6/lvoRfMTY3MSIgZGF0YS1uYW1lPSLot6/lvoQgMTY3MSIgY2xhc3M9ImNscy0zIiBkPSJNNjYuODg5LDE1LjcyMmE2LjM0NCw2LjM0NCwwLDAsMSwzLjk4NSwxLjM5NWwzLjE0OS0zLjA3OWExMC45NDgsMTAuOTQ4LDAsMCwwLTE2Ljg0OSwzLjI0OWwzLjY0NCwyLjcyNGE2LjM2Niw2LjM2NiwwLDAsMSw2LjA3MS00LjI4OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjY3Ljg1NSA1MjkuNTIpIi8+CiAgICA8cGF0aCBpZD0i6Lev5b6EXzE2NzIiIGRhdGEtbmFtZT0i6Lev5b6EIDE2NzIiIGNsYXNzPSJjbHMtNCIgZD0iTTY2Ljg4OSw2MDkuMjE3YTYuMzY5LDYuMzY5LDAsMCwxLTYuMDczLTQuMjg5bC0zLjY0MywyLjcyNGExMC44MTYsMTAuODE2LDAsMCwwLDkuNzE1LDUuOSwxMC40NDEsMTAuNDQxLDAsMCwwLDcuMDUyLTIuNjM4bC0zLjQ1OS0yLjYxOGE2LjgsNi44LDAsMCwxLTMuNTk1LjkyNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjY3Ljg1NSAtNTEuNDY3KSIvPgogICAgPHBhdGggaWQ9Iui3r+W+hF8xNjczIiBkYXRhLW5hbWU9Iui3r+W+hCAxNjczIiBjbGFzcz0iY2xzLTUiIGQ9Ik01MjYuOTg0LDQyMi45MTZhOC42Miw4LjYyLDAsMCwwLS4yNDYtMS45MjRINTE2LjY1MXY0LjA4OWg1LjgwNmE0Ljc2Myw0Ljc2MywwLDAsMS0yLjIxLDMuMTY0bDMuNDU4LDIuNjE4YTEwLjQxOCwxMC40MTgsMCwwLDAsMy4yOC03Ljk0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MS45MDggMTI4LjU4KSIvPgogIDwvZz4KPC9zdmc+Cg==';

export const twitterIcon =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOSIgaGVpZ2h0PSIyOSIgdmlld0JveD0iMCAwIDI5IDI5Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICMxZGExZjI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSLnu4RfMTIwNyIgZGF0YS1uYW1lPSLnu4QgMTIwNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMyMCAtNTM3KSI+CiAgICA8cmVjdCBpZD0i55+p5b2iXzQwMCIgZGF0YS1uYW1lPSLnn6nlvaIgNDAwIiBjbGFzcz0iY2xzLTEiIHdpZHRoPSIyOSIgaGVpZ2h0PSIyOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIwIDUzNykiLz4KICAgIDxwYXRoIGlkPSJ0d2l0dGVyIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMTQuMTQ1LDE3NS43NjFhNy41LDcuNSwwLDAsMS0yLjE1My41NzksMy43MywzLjczLDAsMCwwLDEuNjQ0LTIuMDYxLDcuMzgyLDcuMzgyLDAsMCwxLTIuMzcyLjksMy43NDIsMy43NDIsMCwwLDAtNi40NzEsMi41NTksNC4yOTQsNC4yOTQsMCwwLDAsLjA5Mi44NTcsMTAuNjI1LDEwLjYyNSwwLDAsMS03LjcwOS0zLjkxNCwzLjc1LDMuNzUsMCwwLDAsMS4xNTgsNSwzLjc3MSwzLjc3MSwwLDAsMS0xLjY5MS0uNDc2di4wNDZhMy43NCwzLjc0LDAsMCwwLDMsMy42NywzLjk2MSwzLjk2MSwwLDAsMS0uOTg0LjEyN0E0Ljk3NSw0Ljk3NSwwLDAsMSw5Ny45NSwxODNhMy43NDYsMy43NDYsMCwwLDAsMy41LDIuNTk0LDcuNDkzLDcuNDkzLDAsMCwxLTQuNjQyLDEuNiw3LjY0NCw3LjY0NCwwLDAsMS0uOS0uMDQ2LDEwLjY0NSwxMC42NDUsMCwwLDAsMTYuMzgxLTguOTY0YzAtLjE2MiwwLS4zMjQtLjAxMS0uNDg3QTguMDUyLDguMDUyLDAsMCwwLDExNC4xNDUsMTc1Ljc2MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyOS42MTIgMzcwLjA4OSkiLz4KICA8L2c+Cjwvc3ZnPgo=';

  3. Wrapping your ConnectButton instance with a social login patch. When using Particle Auth Core with RainbowKit, you'll need to add a short snippet that fixes a few common issues that may arise when using social logins with wagmi. In our demo, we place this within the App.tsx file, which is then rendered in place of ConnectButton directly. Below is the snippet in question:

    1. import React, { useEffect } from 'react';
import { useConnect as useParticleConnect } from '@particle-network/auth-core-modal';
import { AuthCoreEvent, getLatestAuthType, isSocialAuthType, particleAuth } from '@particle-network/auth-core';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useConnect, useDisconnect } from 'wagmi';
import { particleWagmiWallet } from './particleWallet/particleWagmiWallet';

function App() {
    const { connect } = useConnect();
    const { connectionStatus } = useParticleConnect();
    const { disconnect } = useDisconnect();

    useEffect(() => {
        if (connectionStatus === 'connected' && isSocialAuthType(getLatestAuthType())) {
            connect({
                connector: particleWagmiWallet({ socialType: getLatestAuthType() }),
            });
        }
        const onDisconnect = () => disconnect();
        particleAuth.on(AuthCoreEvent.ParticleAuthDisconnect, onDisconnect);
        return () => particleAuth.off(AuthCoreEvent.ParticleAuthDisconnect, onDisconnect);
    }, [connect, connectionStatus, disconnect]);

    return <ConnectButton />;
}

export default App;

📘

Demo repository available

To dive further into this process and view a practical example of implementation, take a look at the following demo repository:

  1. Next.js example.
  2. (create-react-app example coming soon)

Common issues

The following issues might be encountered in this process:

  1. Minification for Vercel deployments, generally seen as Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'sqrt').
    1. Occasionally, Vercel deployments are known to throw errors relating to the minifier you're using, crashing the application upon startup. This is due to the usage of swcMinify within your next.config.js file. You'll need to switch swcMinify from true to false, thus using Terser as the minifier rather than SWC.

‎

ℹ️

A full walkthrough video on leveraging Particle Auth within RainbowKit is available.

For an extended explanation and tutorial regarding the integration of Particle Auth within RainbowKit, we've created a video and GitHub template repository.

Updated about 1 month ago