Create Smart Wallets

Create smart wallets with Crossmint

Create wallets on-demand with an email address, phone number, or any user identifier. Bring your own signer or use Crossmint’s managed Passkey signer. Compatible with any Viem account or EIP1193 compatible provider. Available on Polygon, Optimism, Base, Arbitrum, and their corresponding testnets. If you are looking for a different chain, reach out to us at [e-mail]

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 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

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.

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

• 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);
            }
        });
    });
};