Skip to content
SKALE Docs

Wallet Aggregators

RainbowKit is a React library that makes it easy to add wallet connection. In addition to managing wallet connections and disconnections, RainbowKit supports a wide range of wallets, allows swapping connection chains, and offers many other features.

Implementation Example

  1. Package Install
    Terminal window
    npm init @rainbow-me/rainbowkit@latest
  2. Integration
        import {
            RainbowKitProvider,
            getDefaultConfig,
            getDefaultWallets,
        } from '@rainbow-me/rainbowkit';
        import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
        import { createConfig, WagmiConfig } from 'wagmi';
        import { publicProvider } from 'wagmi/providers/public';
        import {
            skaleCalypsoTestnet,
            skaleEuropaTestnet,
            skaleNebulaTestnet,
            skaleTitanTestnet,
            Chain } from "wagmi/chains";
    

        import { useState } from 'react';
        import "@rainbow-me/rainbowkit/styles.css";
    

        const queryClient = new QueryClient();
    

        export default function Web3WalletContainer({children,projectId}: {
            children?: JSX.Element | JSX.Element[];
            projectId: string;
        }) {
    

        const [{ config, chains }] = useState(() => {
    

        const chains: readonly [Chain, ...Chain[]] = [
        skaleCalypsoTestnet,
        skaleEuropaTestnet,
        skaleNebulaTestnet,
        skaleTitanTestnet,
        ]
    

        const config = getDefaultConfig({
            appName: 'your app name',
            projectId,
            chains,
            ssr: true,
        });
    

        return {
            config,
        chains
        }
    });
    

    if (!config || !chains) return null;
    

    return (
        <>
        <WagmiConfig
            config={config}
        >
            <QueryClientProvider client={queryClient}>
                <RainbowKitProvider
                    appInfo={{
                    appName: "your app name",
                }}
                >
                    {children}
                </RainbowKitProvider>
            </QueryClientProvider>
      </WagmiConfig>
    </>
    );
    }

Additional RainbowKit Documentation

Click here for the official documentation.