Crossmint

'use client';

import {
  CrossmintProvider,
  CrossmintWalletProvider,
} from '@crossmint/client-sdk-react-ui';
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

const dynamicEnvId = process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID ?? '';
const crossmintApiKey = process.env.NEXT_PUBLIC_CROSSMINT_DYNAMIC_API_KEY ?? '';

if (!dynamicEnvId || !crossmintApiKey) {
  throw new Error(
    'NEXT_PUBLIC_DYNAMIC_ENV_ID or NEXT_PUBLIC_CROSSMINT_DYNAMIC_API_KEY is not set'
  );
}

export default function CrossmintDynamicProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: dynamicEnvId,
        walletConnectors: [EthereumWalletConnectors],
      }}>
      <CrossmintProvider apiKey={crossmintApiKey}>
        <CrossmintWalletProvider defaultChain="polygon-amoy">
          {children}
        </CrossmintWalletProvider>
      </CrossmintProvider>
    </DynamicContextProvider>
  );
}

'use client';

import {
  useCrossmint,
  useWallet as useCrossmintSmartWallet,
} from '@crossmint/client-sdk-react-ui';
import { isEthereumWallet } from '@dynamic-labs/ethereum';
import {
  getAuthToken,
  useDynamicContext,
  useIsLoggedIn,
} from '@dynamic-labs/sdk-react-core';
import { useEffect, useState } from 'react';

export function useDynamicConnector() {
  const { setJwt } = useCrossmint();
  const { primaryWallet: dynamicPrimaryWallet, sdkHasLoaded } =
    useDynamicContext();
  const isDynamicUserLoggedIn = useIsLoggedIn();
  const {
    getOrCreateWallet: getOrCreateCrossmintSmartWallet,
    status: crossmintSmartWalletStatus,
    error: crossmintSmartWalletError,
    wallet: crossmintWallet,
  } = useCrossmintSmartWallet();

  // State to track loading status
  const [isLoading, setIsLoading] = useState(true);

  // Step 1: Sync Dynamic JWT with Crossmint
  useEffect(() => {
    const syncDynamicJwt = async () => {
      try {
        const dynamicJwt = getAuthToken();
        setJwt(dynamicJwt ?? undefined);
      } catch (error) {
        setJwt(undefined);
        console.error('Failed to get Dynamic JWT:', error);
      }
    };

    if (isDynamicUserLoggedIn) {
      syncDynamicJwt();
    }
  }, [isDynamicUserLoggedIn, setJwt]);

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

      if (!dynamicPrimaryWallet || !isDynamicUserLoggedIn || !sdkHasLoaded) {
        setIsLoading(false);
        return;
      }

      try {

        if (!isEthereumWallet(dynamicPrimaryWallet)) {
          setIsLoading(false);
          return;
        }

        // Get the wallet client from Dynamic
        const dynamicWalletClient = await dynamicPrimaryWallet.getWalletClient();

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

    createWalletWithDynamicSigner();
  }, [dynamicPrimaryWallet, isDynamicUserLoggedIn, sdkHasLoaded, getOrCreateCrossmintSmartWallet]);

  return {
    dynamicWallet: dynamicPrimaryWallet,
    crossmintWallet,
    crossmintSmartWalletStatus,
    crossmintSmartWalletError,
    isLoading: isLoading || crossmintSmartWalletStatus === 'in-progress' || !sdkHasLoaded,
  };
}

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

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

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

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

'use client';

import { DynamicWidget } from '@dynamic-labs/sdk-react-core';
import { Card, CardContent } from '@/components/ui/card';
import { useDynamicConnector } from '@/hooks/useDynamicConnector';

export function WalletCard() {
  const {
    dynamicWallet,
    crossmintWallet,
    crossmintSmartWalletStatus,
    crossmintSmartWalletError,
    isLoading,
  } = useDynamicConnector();

  return (
    <Card className="w-full max-w-lg">
      <CardContent className="space-y-4 pt-6">
        <DynamicWidget />

        <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>Dynamic Signer Wallet:</strong>{' '}
            {dynamicWallet?.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 + Dynamic Integration</h1>
      <p className="text-center max-w-2xl text-muted-foreground">
        This example demonstrates how to use Dynamic's wallet as a signer for Crossmint Smart Wallets.
        When you connect with Dynamic, your wallet serves as the signer for your Crossmint Smart Wallet.
      </p>
      <WalletCard />
    </div>
  );
}