React

Create user wallets from your frontend in under 5 minutes

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.

   next.js

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

   Configuring the Wallet Provider

   createOnLogin · object

   If set creates a wallet on login using the specified configuration.

   Show properties

   chain · string · required

   The chain to use the wallet on.

   See all supported chains for more details. On staging only testnet chains are supported.

   Note: For EVM-compatible chains, wallets are created for all chains as part of the shared address space derived from the same private key. However, to interact with a specific chain using the SDK, you must instantiate a wallet object per chain. This allows the SDK to correctly route interactions to the appropriate network configuration.

   signer · Signer · required

   The signer to use the wallet with.

   callbacks · object

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

   Show properties

   onWalletCreationStart · function

   A function to be called before the wallet is created onchain.

   onTransactionStart · function

   A function to be called before the transaction is signed.

   showPasskeyHelpers · boolean

   Only applies if you are using a passkey as the signer.

   If true, modals explaining what passkeys are will be shown to the user when creating a wallet and signing a transaction, for a better user experience.

   appearance · UIConfig

   Styles to configure the appearance of the passkey modal.

   Show properties

   spacingUnit · string

   The spacing unit to use for the modal.

   borderRadius · string

   The border radius to use for the modal.

   colors · object

   The colors to use for the modal.

   Show properties

   inputBackground · string

   The background color of the input.

   buttonBackground · string

   The background color of the button.

   border · string

   The border color of the modal.

   background · string

   The background color of the modal.

   textPrimary · string

   The primary text color of the modal.

   textSecondary · string

   The secondary text color of the modal.

   textLink · string

   The link text color of the modal.

   danger · string

   The danger color of the modal.

   accent · string

   The accent color of the modal.

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.

Other Links

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.