In this quickstart you will create a simple web app with embedded smart wallets.

​
Integration Steps

​
1. Create a Developer Account

To get started, create a developer account in the Crossmint Staging Console. Open that link, sign in, and accept the dialog to continue.

Crossmint offers two consoles: staging, for development and testing, and www, for production.

​
2. Get an API Key

Once you log in to the console, the next step is to create an .

Click the "Developers" tab to expand a list and click the "API Keys" option.

Within the Client-side keys section, click the “Create new key” button in the top right. Then, check the scopes wallets.create, wallets.read, and wallets:nfts.read and create your key. Save this key for the next step.

Crossmint’s smart wallet SDK must run on the client side. This ensures that both you and Crossmint remain non-custodial. Running the SDK on the server-side will cause errors.

Contact Crossmint to enable access

Once you have created your API key, please contact Crossmint (reach out here if you’re unsure) and provide your Project ID to your Crossmint contact. You can find your Project ID on the page where you created API Keys. It will have a format of xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

​
3. Setup the Project

1

Create a new Next.js application

Use the create-next-app package to get started:

npx create-next-app@latest

If you see this message enter y and Enter to proceed:

Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
2

Name your app `my-first-smart-wallet-app` and accept the default options

What is your project named? my-first-smart-wallet-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
3

Change into the directory created in previous steps

cd my-first-smart-wallet-app
4

Install `@crossmint/client-sdk-aa`

pnpm i @crossmint/client-sdk-aa
5

Install `Viem`

Crossmint’s Smart Wallet SDK is built on top of viem library.

So, first install the library:

pnpm i viem
6

Open the project in a code editor

code .
If you don’t have the code command installed on your system, simply open the folder in your preferred code editor.
7

Add a new file named `.env.local` to root directory of your project

Set your environment variables by adding your client-side API secret from Step 1.

These values are safe to use in the client side of your application and are not considered sensitive.
.env.local
NEXT_PUBLIC_API_KEY="_YOUR_API_KEY_"

​
4. Create a wallet

You’re ready to create a wallet! The code below will generate a signer (a in this example), and leverage that account to create an Account Abstraction wallet.

Details on Signers

A signer is the account that will be used to control and manage the Account Abstraction wallet. Crossmint supports multiple options, including a Viem account or any EIP1193 compatible provider. Want to create a wallet with a specific signer type? Crossmint supports multiple signers, including Fireblocks, Web3Auth, and more.

1

Open the `/app/page.tsx` file in your editor

Replace the entire contents with the following:

/app/page.tsx
"use client";

import { Blockchain, CrossmintAASDK, EVMAAWallet, ViemAccount } from "@crossmint/client-sdk-aa";
import { useEffect, useState } from "react";
import { english, generateMnemonic, mnemonicToAccount } from "viem/accounts";

export default function Home() {
    const [wallet, setWallet] = useState<EVMAAWallet>();
    const [address, setAddress] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    const [email, setEmail] = useState<string>("");

    useEffect(() => {
        const email = localStorage.getItem("email") || "";
        setEmail(email);
    }, []);

    const createAAWallet = async () => {
        setLoading(true);
        const wallet = await createAAWalletHelper();
        setWallet(wallet);
        setLoading(false);
    };

    const createAAWalletHelper = async () => {
        if (typeof window !== "undefined") {
            const xm = CrossmintAASDK.init({
                apiKey: process.env.NEXT_PUBLIC_API_KEY || "",
            });

            let mnemonic = localStorage.getItem(`mnemonic-${email}`);

            if (!mnemonic) {
                mnemonic = generateMnemonic(english);
                localStorage.setItem(`mnemonic-${email}`, mnemonic);
            }

            const account = mnemonicToAccount(mnemonic) as any;
            // NOTE: Do NOT do this in production. This is just for demo purposes.
            // Proper storage of private key material is critical.
            // Crossmint supports several secure signer options, documented later in the guide.

            const signer: ViemAccount = {
                type: "VIEM_ACCOUNT",
                account,
            };

            const wallet = await xm.getOrCreateWallet({ email }, Blockchain.POLYGON_AMOY, { signer });

            const walletAddress = await wallet.getAddress();
            setAddress(walletAddress);

            return wallet;
        }
    };

    const saveEmail = async (email: string) => {
        setEmail(email);
        localStorage.setItem("email", email);
    };

    return (
        <div className="p-5">
            <div>Smart Wallet Example</div>

            {!wallet && (
                <>
                    {loading ? (
                        <div className="py-3">Loading...</div>
                    ) : (
                        <div>
                            <input
                                type="email"
                                value={email}
                                onChange={(e) => saveEmail(e.target.value)}
                                placeholder="Enter your email"
                                className="border rounded w-72 p-2 my-2 text-black"
                            />
                            <button
                                onClick={createAAWallet}
                                className="bg-blue-500 hover:bg-blue-700 text-white font-bold ml-3 py-2 px-4 rounded focus:outline-none"
                            >
                                Create AA Wallet
                            </button>
                        </div>
                    )}
                </>
            )}

            {wallet && <div className="py-3">Address: {address}</div>}
        </div>
    );
}
2

Run the application from your terminal

pnpm run dev

Open the app in your browser with the url http://localhost:3000/. You should see an email input field and button to create a wallet.

And that’s it! You now have created an embedded Smart Wallet. Read more here on how to perform actions with your wallet with the SDK, like signing messages, transactions, and more.

OverviewCreate Smart Wallets