React

Create user wallets from your frontend in under 5 minutes

This page has been updated for Wallets SDK V1. If you are using the previous version, see the previous 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

   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.

   providers.tsx

   "use client";
   
   import {
       CrossmintProvider,
       CrossmintAuthProvider,
       CrossmintWalletProvider,
   } from "@crossmint/client-sdk-react-ui";
   
   export function Providers({
       children,
   }: {
       children: React.ReactNode;
   }) {
       return (
           <CrossmintProvider
               apiKey={process.env.NEXT_PUBLIC_CROSSMINT_API_KEY!}
           >
               <CrossmintAuthProvider
                   loginMethods={["email", "google"]}
               >
                   <CrossmintWalletProvider
                       createOnLogin={{
                           chain: "base-sepolia",
                           recovery: { type: "email" },
                       }}
                   >
                       {children}
                   </CrossmintWalletProvider>
               </CrossmintAuthProvider>
           </CrossmintProvider>
       );
   }
   

   For detailed configuration options, see the React SDK Reference.

3. Display wallet info

   Use the useWallet hook to access the wallet once the user is authenticated.

   wallet-display.tsx

   "use client";
   
   import { useWallet } from "@crossmint/client-sdk-react-ui";
   
   export function WalletDisplay() {
       const { wallet, status } = useWallet();
   
       if (status === "in-progress") {
           return <p>Creating wallet...</p>;
       }
   
       if (!wallet) {
           return <p>No wallet connected</p>;
       }
   
       return (
           <div>
               <p>Address: {wallet.address}</p>
               <p>Chain: {wallet.chain}</p>
           </div>
       );
   }
   
4. Check balances and fund the wallet

   Query token balances and fund the wallet in staging.

   balance-card.tsx

   "use client";
   
   import { useWallet } from "@crossmint/client-sdk-react-ui";
   import { useState } from "react";
   
   const TOKENS = ["usdxm", "usdc"];
   
   export function BalanceCard() {
       const { wallet } = useWallet();
       const [balances, setBalances] =
           useState<Record<string, string>>({});
   
       const refreshBalance = async () => {
           if (!wallet) return;
           const res = await wallet.balances(TOKENS);
           const map: Record<string, string> = {};
           for (const t of res.tokens) {
               map[t.symbol] = t.amount;
           }
           setBalances(map);
       };
   
       const handleFund = async () => {
           if (!wallet) return;
           // Note: stagingFund() is for testing only - remove in production
           await wallet.stagingFund(10);
           await refreshBalance();
       };
   
       return (
           <div>
               {TOKENS.map((token) => (
                   <p key={token}>
                       {token.toUpperCase()}: {balances[token] ?? "—"}
                   </p>
               ))}
               <button onClick={handleFund}>
                   Fund 10 USDXM
               </button>
               <button onClick={refreshBalance}>
                   Refresh
               </button>
           </div>
       );
   }
   
5. Transfer tokens

   Send tokens to another wallet address.

   transfer-form.tsx

   "use client";
   
   import { useWallet } from "@crossmint/client-sdk-react-ui";
   import { useState } from "react";
   
   export function TransferForm() {
       const { wallet } = useWallet();
       const [recipient, setRecipient] = useState("");
       const [amount, setAmount] = useState("");
       const [explorerUrl, setExplorerUrl] = useState("");
   
       const handleTransfer = async () => {
           if (!wallet || !recipient || !amount) return;
           try {
               const { explorerLink } = await wallet.send(
                   recipient,
                   "usdxm",
                   amount
               );
               setExplorerUrl(explorerLink);
               setRecipient("");
               setAmount("");
           } catch (error) {
               console.error("Transfer failed:", error);
           }
       };
   
       return (
           <div>
               <input
                   placeholder="Recipient address"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
               />
               <input
                   type="number"
                   placeholder="Amount"
                   value={amount}
                   onChange={(e) => setAmount(e.target.value)}
               />
               <button
                   onClick={handleTransfer}
                   disabled={!recipient || !amount}
               >
                   Transfer
               </button>
               {explorerUrl && (
                   <a href={explorerUrl} target="_blank">
                       View transaction
                   </a>
               )}
           </div>
       );
   }
   
6. Render the app

   Compose the providers and components in your app entry point.

   app.tsx

   "use client";
   
   import { Providers } from "./providers";
   import { WalletDisplay } from "./wallet-display";
   import { BalanceCard } from "./balance-card";
   import { TransferForm } from "./transfer-form";
   
   export default function Home() {
       return (
           <Providers>
               <WalletDisplay />
               <BalanceCard />
               <TransferForm />
           </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.

Other Links

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.