React Native

"use client";

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

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <CrossmintProvider apiKey="crossmint-client-api-key">
            <CrossmintAuthProvider>
                <CrossmintWalletProvider>
                    createOnLogin={{
                        chain: "solana",
                    }}
                >
                {children}
                </CrossmintWalletProvider>
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}

"use client";

import { useAuth } from "@crossmint/client-sdk-react-ui";

export function AuthButton() {
    const { login, logout, jwt } = useAuth();

    return !jwt ? (
        <button type="button" onClick={login}>Login</button>
    ) : (
        <button type="button" onClick={logout}>Logout</button>
    );
}

"use client";

import { useWallet } from "@crossmint/client-sdk-react-ui";

export function Wallet() {
    const { wallet, status, error } = useWallet();

    if (status === "error") {
        return <div>Error: {error?.message}</div>;
    }

    if (status === "in-progress") {
        return <div>Loading...</div>;
    }

    if (status === "loaded" && wallet) {
        return <div>Connected: {wallet.address}</div>;
    }

    return <div>Wallet not connected</div>;
}