turnkey-wagmi-connector

pnpm add turnkey-wagmi-connector wagmi @wagmi/core viem @tanstack/react-query @turnkey/react-wallet-kit

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig, http } from "wagmi";
import { base, mainnet } from "viem/chains";
import {
  TurnkeySessionProvider,
  TurnkeyWagmiBridge,
  createTurnkeyConnector,
} from "turnkey-wagmi-connector";

const chains = [mainnet, base] as const;

const turnkeyConnector = createTurnkeyConnector({
  chains,
  walletLabel: "Turnkey Session",
});

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

const queryClient = new QueryClient();

const turnkeyConfig = {
  apiBaseUrl: "https://api.turnkey.com",
  organizationId: process.env.NEXT_PUBLIC_TURNKEY_ORGANIZATION_ID!,
  authProxyConfigId: process.env.NEXT_PUBLIC_TURNKEY_AUTH_PROXY_CONFIG_ID!,
  auth: {
    autoRefreshSession: false,
    methods: { emailOtpAuthEnabled: true },
    methodOrder: ["email"],
  },
};

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <TurnkeySessionProvider turnkeyConfig={turnkeyConfig}>
        <WagmiProvider config={wagmiConfig}>
          <TurnkeyWagmiBridge />
          {children}
        </WagmiProvider>
      </TurnkeySessionProvider>
    </QueryClientProvider>
  );
}

NEXT_PUBLIC_TURNKEY_ORGANIZATION_ID=...
NEXT_PUBLIC_TURNKEY_AUTH_PROXY_CONFIG_ID=...
NEXT_PUBLIC_REOWN_PROJECT_ID=...
NEXT_PUBLIC_BASE_RPC_URL=...
NEXT_PUBLIC_ARBITRUM_RPC_URL=...
NEXT_PUBLIC_OPTIMISM_RPC_URL=...