@privy-io/cross-app-connect

Privy cross-app wallet connectors for wagmi and RainbowKit

Installation

npm install -S @privy-io/cross-app-connect wagmi viem @rainbow-me/rainbowkit

Usage

import {toPrivyWallet} from '@privy-io/cross-app-connect/rainbow-kit';

import {connectorsForWallets, ConnectButton} from "@rainbow-me/rainbowkit";
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {WagmiProvider, createConfig, http} from 'wagmi';
import {mainnet} from 'wagmi/chains';

const privyWallet = toPrivyWallet({
  id: <privy-wallet-app-id>,
  name: 'Privy wallet app',
  iconUrl: 'https://example.com/image.png',
})

const connectors = connectorsForWallets(
  [
    {
      groupName: "Privy",
      wallets: [privyWallet],
    },
  ],
  {
    appName: "Privy",
    projectId: "Example",
  }
);

export const wagmiConfig = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors,
  ssr: true,
});

const queryClient = new QueryClient();

export default function App({children}: {children: React.ReactNode}) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}