Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt

Use this file to discover all available pages before exploring further.

You are viewing docs for the previous version of the Wallets SDK. We recommend upgrading to V1. See the updated version of this page or the V1 migration guide.

Before you start

Set up your project and get an API key.

Wallets Quickstart

See a full working example.
1

Install the SDK

Run the following command to install the SDK:
npm i @crossmint/client-sdk-react-ui
2

Add the Crossmint providers to your app

Add the necessary Crossmint providers to your app. This example uses Crossmint Auth but you can use any authentication provider of your choice.With the current setup, a wallet will be created automatically on login.
"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: "base-sepolia",
                        signer: {
                            type: "email",
                        },
                    }}
                >
                    {children}
                </CrossmintWalletProvider>
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}
For detailed configuration options, see the React SDK Reference.
3

Build a wallet component with basic functionality

Create a component that handles authentication and basic wallet actions.
wallet-app.tsx
import { useState } from "react";
import { useAuth, useWallet } from "@crossmint/client-sdk-react-ui";

export function WalletApp() {
    const { login, logout, jwt, status } = useAuth();
    const { wallet } = useWallet();
    const [usdxmBalance, setUsdxmBalance] = useState<string>("");

    const fundWallet = async () => {
        if (!wallet || !jwt) return;
        await wallet.stagingFund(10);
    };

    const transferTokens = async () => {
        if (!wallet) return;
        
        const recipient = "0xdf8b5f9c19e187f1ea00730a1e46180152244315";
        const token = "usdxm";
        const amount = "1";
        
        await wallet.send(recipient, token, amount);
    };

    const checkBalance = async () => {
        if (!wallet) return;
        const balances = await wallet.balances(["usdxm"]);
        const usdxmBalance = balances.tokens.find(
            (token) => token.symbol === "usdxm"
        )?.amount;
        setUsdxmBalance(usdxmBalance || "0");
    };

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

    if (wallet == null || status === "logged-out") {
        return <button onClick={login}>Login</button>;
    }

    return (
        <div>
            <h2>💼 Wallet: {wallet?.address}</h2>
            <h3>👤 {wallet?.owner}</h3><br />
            <button onClick={fundWallet}>💰 Fund with 10 USDXM</button><br />
            <button onClick={transferTokens}>📤 Send 1 USDXM</button><br />
            <button onClick={checkBalance}>🔍 Check Balance</button><br />
            <button onClick={logout}>🚪 Logout</button>
            {usdxmBalance && <p>💳 USDXM Balance: {usdxmBalance}</p>}
        </div>
    );
}
4

Render the wallet app

Render the wallet app in your application.
app.tsx
"use client";

import { Providers } from './providers';
import { WalletApp } from './wallet-app';

export default function Home() {
    return (
        <Providers>
            <WalletApp />
        </Providers>
    );
}

​
Launching in Production

For production, some changes are required:
  1. Create a developer account on the production console
  2. Create a production client API key on the API Keys page with the API scopes users.create, users.read, wallets.read, wallets.create, wallets:transactions.create, wallets:transactions.sign, wallets:balance.read, wallets.fund
  3. Replace your test API key with the production key
  4. Use your own authentication provider: For production applications, Crossmint recommends using third-party authentication with providers like Auth0, Firebase, or Supabase, rather than Crossmint Auth. Configure JWT authentication in the Crossmint Console under API Keys > JWT Authentication.

​
Learn More

Check Balances

Check the balance of a wallet.

Transfer Tokens

Send tokens between wallets.

Operational Signers

Register operational signers on a wallet.

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.