Create Smart Wallets

Generate wallets for your users

Refer to the Quickstart for an example of setting this up.

Prerequisites:

1. Create a Crossmint account if you haven’t yet.
2. Go to the API key section of the developer console and create a new client-side API key with the following scopes: wallets.read, wallets.create, and wallets:nfts.read.
3. Whitelist your project domain by adding it to the ‘Authorized Origins’ section when creating an API key. If testing locally, whitelist localhost and your port (e.g. localhost:3000) for development.
4. Make a note of your API key, as you will need this to create wallets.

Creating a Wallet

To create a wallet, you will use the getOrCreateWallet function of the SmartWalletSDK, which takes the following parameters:

userParams

object

required

An object identifying the user and containing the following properties: - jwt - JSON web token from your auth provider

chain

string

required

The blockchain you intend to create the smart contract wallet on. Available options:

• polygon
• polygon-amoy
• base
• base-sepolia
• arbitrum
• arbitrum-sepolia
• optimism
• optimism-sepolia

If you are looking for a different chain, reach out to sales.

walletParams

object

An object containing a signer property. Read on to learn what is a signer and the different types available.

The way that you call the getOrCreateWallet function will depend on the type of signer your application is utilizing.

What is a signer?

A signer is an entity that controls and manages the Smart Wallet by authenticating actions, approving transactions, and managing assets. Crossmint supports multiple options for signers, offering flexibility in wallet control:

• Passkeys: Passwordless authentication allows users to securely approve and sign transactions directly.
• Auth providers (Privy, Dynamic): Enable authentication methods that verify users and allow them to control wallet actions.
• Blockchain providers (Viem account, EIP1193 compatible): Use EIP1193 compatible wallets to manage and control access to Smart Wallets.

These options provide flexible ways to manage and control access to Smart Wallets securely.

• Passkeys Signer
• 1193 Provider (e.g. MetaMask)
• Viem Account
• Web3Auth

import { SmartWalletChain, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
import { getJWTFromAuth } from "./FirebaseAuthManager";

export const createSmartWalletPasskey = async () => {
    const xm = SmartWalletSDK.init({
        clientApiKey: process.env.REACT_APP_CROSSMINT_API_KEY_STG,
    });
    const jwt = await getJWTFromAuth();

    return await xm.getOrCreateWallet({ jwt }, SmartWalletChain.POLYGON_AMOY);
}

FirebaseAuthManager Example

Below is an example implementation of the FirebaseAuthManager.ts file imported in the code samples above.

FirebaseAuthManager.ts

import { FirebaseError, initializeApp } from "firebase/app";
import {
    GoogleAuthProvider,
    UserCredential,
    getAuth,
    indexedDBLocalPersistence,
    onAuthStateChanged,
    signInWithPopup,
} from "firebase/auth";

const FIREBASE_CONFIG = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

export const getJWTFromAuth = () => {
    let jwt = await checkAuthState();

    if (!jwt) {
        jwt = await signInWithGoogle();
    }

    if (!jwt) {
        throw new Error("No JWT token found");
    }

    return jwt;
};

export const parseToken = (token: any) => {
    try {
        const base64Url = token.split(".")[1];
        const base64 = base64Url.replace("-", "+").replace("_", "/");
        return JSON.parse(window.atob(base64 || ""));
    } catch (err) {
        console.error(err);
        return null;
    }
};

export const firebaseAuth = () => {
    const app = initializeApp(FIREBASE_CONFIG);
    return getAuth(app);
};

const signInWithGoogle = async (): Promise<string | undefined> => {
    const auth = firebaseAuth();

    auth.setPersistence(indexedDBLocalPersistence);
    const googleProvider = new GoogleAuthProvider();
    let res: UserCredential;
    try {
        res = await signInWithPopup(auth, googleProvider);
    } catch (e) {
        console.log(
            e instanceof FirebaseError && e.code === "auth/popup-closed-by-user"
                ? "Pop-up closed without selecting an account"
                : e
        );
        return;
    }

    return res.user.getIdToken(true);
};

const checkAuthState = (): Promise<string | undefined> => {
    return new Promise((resolve, reject) => {
        const auth = firebaseAuth();
        onAuthStateChanged(auth, async (user) => {
            try {
                if (user) {
                    const jwt = await user.getIdToken(true);
                    resolve(jwt);
                } else {
                    resolve(undefined);
                }
            } catch (error) {
                reject(error);
            }
        });
    });
};

The getOrCreateWallet function returns a EVMSmartWallet object, which contains the following properties:

• address - The address of the created wallet
• chain - The chain the wallet was created on
• client - A Viem client for interacting with the wallet

As well as some helper functions to interact with the wallet such as:

• nfts - A function to get the NFTs owned by the wallet
• executeContract - A function to execute a contract on the wallet
• transferToken - A function to transfer tokens owned by the wallet