Get Started

import type { ReactNode } from "react";
import { CrossmintProvider, CrossmintWalletProvider } from "@crossmint/client-sdk-react-ui";

export function Providers({ children }: { children: ReactNode }) {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider>{children}</CrossmintWalletProvider>
        </CrossmintProvider>
    );
}

import { useEffect } from "react";
import {
    CrossmintEmbeddedOfframp,
    createCrossmintWalletSigner,
    useWallet,
    type EmbeddedOfframpCredentials,
} from "@crossmint/client-sdk-react-ui";

export function Withdraw({ credentials, onClose }: { credentials: EmbeddedOfframpCredentials; onClose: () => void }) {
    const { wallet, getWallet } = useWallet();

    useEffect(() => {
        // Load the wallet that the session pays from, on the chain the session uses.
        getWallet({ chain: "base-sepolia" }).catch(console.error);
    }, [getWallet]);

    if (wallet == null) {
        return null;
    }

    return (
        <CrossmintEmbeddedOfframp
            credentials={credentials}
            payer={createCrossmintWalletSigner(wallet)}
            onComplete={({ orderId, txId }) => console.log("Withdrawal sent:", orderId, txId)}
            onCancel={onClose}
            onError={({ reason, retriable, message }) => console.error("Offramp error:", reason, retriable, message)}
        />
    );
}