NEXT_PUBLIC_PRIVY_APP_ID=_YOUR_PRIVY_APP_ID_
NEXT_PUBLIC_CROSSMINT_API_KEY=_YOUR_CROSSMINT_API_KEY_

'use client';

import {
  CrossmintProvider,
  CrossmintWalletProvider,
} from '@crossmint/client-sdk-react-ui';
import { PrivyProvider } from '@privy-io/react-auth';

const privyAppId = process.env.NEXT_PUBLIC_PRIVY_APP_ID ?? '';
const crossmintApiKey = process.env.NEXT_PUBLIC_CROSSMINT_API_KEY ?? '';

if (!privyAppId || !crossmintApiKey) {
  throw new Error(
    'NEXT_PUBLIC_PRIVY_APP_ID or NEXT_PUBLIC_CROSSMINT_API_KEY is not set'
  );
}

export default function CrossmintPrivyProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <PrivyProvider
      appId={privyAppId}
      config={{
        embeddedWallets: {
          createOnLogin: 'all-users', // Privy Embedded Wallets as signers
        },
      }}>
      <CrossmintProvider apiKey={crossmintApiKey}>
        <CrossmintWalletProvider defaultChain="polygon-amoy">
          {children}
        </CrossmintWalletProvider>
      </CrossmintProvider>
    </PrivyProvider>
  );
}

'use client';

import {
  useCrossmint,
  useWallet as useCrossmintSmartWallet,
} from '@crossmint/client-sdk-react-ui';
import { usePrivy, useWallets } from '@privy-io/react-auth';
import { useEffect, useState } from 'react';

export function usePrivyConnector() {
  const { ready, authenticated, getAccessToken } = usePrivy();
  const { setJwt } = useCrossmint();
  const { wallets: privyWallets, ready: privyReady } = useWallets();
  const {
    getOrCreateWallet: getOrCreateCrossmintSmartWallet,
    status: crossmintSmartWalletStatus,
    error: crossmintSmartWalletError,
    wallet: crossmintWallet,
  } = useCrossmintSmartWallet();

  // State to track loading status
  const [isLoading, setIsLoading] = useState(true);
  // State to store the Privy embedded wallet
  const [privyEmbeddedWallet, setPrivyEmbeddedWallet] = useState<any>(null);

  // Step 1: Sync Privy JWT with Crossmint
  useEffect(() => {
    const syncPrivyJwt = async () => {
      try {
        const privyJwt = await getAccessToken();
        setJwt(privyJwt ?? undefined);
      } catch (error) {
        setJwt(undefined);
        console.error('Failed to get Privy JWT:', error);
      }
    };

    if (ready && authenticated) {
      syncPrivyJwt();
    }
  }, [ready, authenticated, getAccessToken, setJwt]);

  // Step 2: Get Privy embedded wallet and create Crossmint wallet
  useEffect(() => {
    const createWalletWithPrivySigner = async () => {
      setIsLoading(true);

      if (!privyWallets?.length || !ready || !authenticated || !privyReady) {
        setIsLoading(false);
        return;
      }

      try {
        // Find the Privy embedded wallet
        const embeddedWallet = privyWallets.find(
          (wallet) => wallet.walletClientType === 'privy'
        );

        if (!embeddedWallet) {
          setIsLoading(false);
          return;
        }

        setPrivyEmbeddedWallet(embeddedWallet);

        // Get the signer from Privy
        const signer = await embeddedWallet.getEthereumProvider();

        // Create a Crossmint Smart Wallet using the Privy wallet as signer
        await getOrCreateCrossmintSmartWallet({
          type: 'evm-smart-wallet',
          signer,
        });
      } catch (error) {
        console.error('Failed to create Crossmint wallet:', error);
      } finally {
        setIsLoading(false);
      }
    };

    createWalletWithPrivySigner();
  }, [privyWallets, ready, authenticated, privyReady, getOrCreateCrossmintSmartWallet]);

  return {
    privyEmbeddedWallet,
    crossmintWallet,
    crossmintSmartWalletStatus,
    crossmintSmartWalletError,
    isLoading: isLoading || crossmintSmartWalletStatus === 'in-progress' || !privyReady,
  };
}

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

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Crossmint + Privy Integration',
  description: 'Example of using Crossmint with Privy Auth',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <CrossmintPrivyProvider>
          <main className="flex min-h-screen flex-col items-center justify-between p-24">
            {children}
          </main>
        </CrossmintPrivyProvider>
      </body>
    </html>
  );
}

'use client';

import { usePrivy } from '@privy-io/react-auth';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { usePrivyConnector } from '@/hooks/usePrivyConnector';

export function WalletCard() {
  const { login, logout, authenticated } = usePrivy();
  const {
    privyEmbeddedWallet,
    crossmintWallet,
    crossmintSmartWalletStatus,
    crossmintSmartWalletError,
    isLoading,
  } = usePrivyConnector();

  return (
    <Card className="w-full max-w-lg">
      <CardContent className="space-y-4 pt-6">
        {!authenticated ? (
          <Button onClick={login} className="w-full">
            Log In with Privy
          </Button>
        ) : (
          <Button onClick={logout} className="w-full">
            Log Out
          </Button>
        )}

        <div className="space-y-2 pt-4">
          <div className="text-sm text-muted-foreground">
            <strong>Crossmint Smart Wallet:</strong>{' '}
            {crossmintWallet?.address || 'Not connected'}
          </div>
          <div className="text-sm text-muted-foreground">
            <strong>Privy Signer Wallet:</strong>{' '}
            {privyEmbeddedWallet?.address || 'Not connected'}
          </div>
          <div className="text-sm text-muted-foreground">
            <strong>Status:</strong>{' '}
            {isLoading ? 'Loading...' : crossmintSmartWalletStatus}
          </div>

          {crossmintSmartWalletError && (
            <div className="text-sm text-red-500">
              <strong>Error:</strong> {crossmintSmartWalletError?.message}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

import { WalletCard } from '@/components/WalletCard';

export default function Home() {
  return (
    <div className="flex flex-col items-center gap-8">
      <h1 className="text-3xl font-bold">Crossmint + Privy Integration</h1>
      <p className="text-center max-w-2xl text-muted-foreground">
        This example demonstrates how to use Privy's embedded wallet as a signer for Crossmint Smart Wallets.
        When you log in with Privy, an embedded wallet is created that serves as the signer for your Crossmint Smart Wallet.
      </p>
      <WalletCard />
    </div>
  );
}