React Quickstart

"use server";

interface CreateOfframpSessionParams {
    userId: string;
    receiptEmail: string;
    walletAddress: string;
    chain: string;
}

export async function createOfframpSession({ userId, receiptEmail, walletAddress, chain }: CreateOfframpSessionParams) {
    const serverApiKey = process.env.CROSSMINT_SERVER_SIDE_API_KEY;
    if (serverApiKey == null) {
        throw new Error("CROSSMINT_SERVER_SIDE_API_KEY is not set");
    }

    const response = await fetch("https://staging.crossmint.com/api/unstable/offramp-sessions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-API-KEY": serverApiKey,
        },
        body: JSON.stringify({
            userLocator: `userId:${userId}`,
            payer: { address: walletAddress, chain },
            receiptEmail,
        }),
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || "Failed to create the offramp session");
    }

    const { sessionId, clientSecret } = await response.json();
    return { sessionId, clientSecret };
}

"use client";

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

export default function Withdraw({ userId, email }: { userId: string; email: string }) {
    const { wallet } = useWallet();
    const [credentials, setCredentials] = useState<EmbeddedOfframpCredentials | null>(null);
    const [isLoading, setIsLoading] = useState(false);

    if (wallet == null) {
        return <p>Sign in to load your wallet.</p>;
    }

    const startWithdrawal = async () => {
        setIsLoading(true);
        try {
            setCredentials(
                await createOfframpSession({
                    userId,
                    receiptEmail: email,
                    walletAddress: wallet.address,
                    chain: wallet.chain,
                })
            );
        } catch (error) {
            console.error("Failed to create the offramp session:", error);
        } finally {
            setIsLoading(false);
        }
    };

    if (credentials == null) {
        return (
            <button onClick={startWithdrawal} disabled={isLoading}>
                {isLoading ? "Starting..." : "Withdraw to bank"}
            </button>
        );
    }

    const close = () => setCredentials(null);

    return (
        <div className="max-w-[450px] w-full mx-auto">
            <button onClick={close}>Close</button>
            <CrossmintEmbeddedOfframp
                credentials={credentials}
                payer={createCrossmintWalletSigner(wallet)}
                onStatusChange={({ status, orderId }) => console.log("Offramp status:", status, orderId)}
                onComplete={({ orderId, txId }) => console.log("Withdrawal sent:", orderId, txId)}
                onCancel={close}
                onError={({ reason, retriable, message }) => console.error("Offramp error:", reason, retriable, message)}
            />
        </div>
    );
}

import { Providers } from "./providers";
import Withdraw from "./components/Withdraw";

export default function Home() {
    return (
        <Providers>
            <main className="min-h-screen flex items-center justify-center">
                <Withdraw userId="<USER_ID>" email="alice@example.com" />
            </main>
        </Providers>
    );
}