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.

See all supported chains here.

"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: "<your-chain>",
                    }}
                >
                    {children}
                </CrossmintWalletProvider>
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}

​
Configuring the Wallet Provider

​
createOnLogin
object

If set creates a wallet on login using the specified configuration. See create wallet for more details on the configuration options.

​
callbacks
object

A set of callbacks to be called when the wallet is created or a transaction is initiated.

3

Allow users to login and logout

Add a component to authenticate the user.

auth-button.tsx
"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>
    );
}
4

Use the wallet

Access and use the wallet object.

wallet.tsx
"use client";

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

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

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

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

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

​
Launching in Production

For production, the steps are almost identical, but 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

​
Learn More

Check Balances

Check the balance of a wallet.

Transfer Tokens

Send tokens between wallets.

Delegated Signers

Add delegated signers to a wallet.

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.