React Native Quickstart

import express from "express";

const app = express();
app.use(express.json());

app.post("/api/offramp-session", async (req, res) => {
    const { userId, receiptEmail, walletAddress, chain } = req.body;
    const serverApiKey = process.env.CROSSMINT_SERVER_SIDE_API_KEY;

    if (serverApiKey == null) {
        return res.status(500).json({ error: "Server API key not configured" });
    }

    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,
        }),
    });

    const data = await response.json();
    if (!response.ok) {
        return res.status(response.status).json(data);
    }

    res.json({ sessionId: data.sessionId, clientSecret: data.clientSecret });
});

app.listen(3000);

import { useState } from "react";
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import {
    CrossmintEmbeddedOfframp,
    createCrossmintWalletSigner,
    useWallet,
    type EmbeddedOfframpCredentials,
} from "@crossmint/client-sdk-react-native-ui";

// Replace with your backend URL. A device or emulator cannot reach localhost: use your computer's LAN IP, or 10.0.2.2 on the Android emulator.
const API_URL = "http://192.168.1.10:3000";

export default function WithdrawScreen({ 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 <Text>Sign in to load your wallet.</Text>;
    }

    const startWithdrawal = async () => {
        setIsLoading(true);
        try {
            const response = await fetch(`${API_URL}/api/offramp-session`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    userId,
                    receiptEmail: email,
                    walletAddress: wallet.address,
                    chain: wallet.chain,
                }),
            });
            if (!response.ok) {
                throw new Error("Failed to create the offramp session");
            }
            setCredentials(await response.json());
        } catch (error) {
            console.error("Failed to create the offramp session:", error);
        } finally {
            setIsLoading(false);
        }
    };

    if (credentials == null) {
        return (
            <TouchableOpacity style={styles.button} onPress={startWithdrawal} disabled={isLoading}>
                {isLoading ? (
                    <ActivityIndicator color="#fff" />
                ) : (
                    <Text style={styles.buttonText}>Withdraw to bank</Text>
                )}
            </TouchableOpacity>
        );
    }

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

    return (
        <View style={styles.offramp}>
            <TouchableOpacity style={styles.closeButton} onPress={close}>
                <Text>Close</Text>
            </TouchableOpacity>
            <CrossmintEmbeddedOfframp
                credentials={credentials}
                payer={createCrossmintWalletSigner(wallet)}
                fill
                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)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    offramp: {
        flex: 1,
    },
    closeButton: {
        alignSelf: "flex-end",
        padding: 16,
    },
    button: {
        backgroundColor: "#000",
        padding: 16,
        borderRadius: 8,
        alignItems: "center",
        margin: 24,
    },
    buttonText: {
        color: "#fff",
        fontSize: 16,
        fontWeight: "500",
    },
});

import { StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import CrossmintProviders from "./providers";
import WithdrawScreen from "./screens/WithdrawScreen";

export default function App() {
    return (
        <SafeAreaProvider>
            <CrossmintProviders>
                <SafeAreaView style={styles.container}>
                    <WithdrawScreen userId="<USER_ID>" email="alice@example.com" />
                </SafeAreaView>
            </CrossmintProviders>
        </SafeAreaProvider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
});