Dynamic.xyz

Create smart wallets over your existing Dynamic.xyz accounts and wallets

Crossmint Smart Wallets are compatible with Dynamic.xyz. This guide explains how to automatically attach a Smart Wallet to your dynamic embedded wallet, to enable smart wallet features such as gasless transactions, modules, chain abstracted balance, and more, while continuing to leverage dynamic for authentication and key custody.

Create an API Key

The first step for integrating 3rd party authentication into your project with Crossmint is to obtain a client-side API key. You can find more info for creating a client-side API key here.

Navigate to the "Integrate" section on the left navigation bar, and ensure you're on the "API Keys" tab.

Within the Client-side keys section, click the "Create new key" button in the top right.

On the authorized origins section, enter http://localhost:3000 and click "Add origin".

Next, check the scopes labeled wallets.create, wallets.read, users.create.

Check the "JWT Auth" box

Finally, create your key and save it for subsequent steps.

Use Dynamic.xyz for API Key Authentication

After the key is generated, you need to set it to require dynamic.xyz auth tokens for authorization.

To begin, go to the Dynamic dashboard at https://app.dynamic.xyz/.

Once logged in, select an existing project or create a new one.

You need to make sure you’re using live keys for mainnets and sandbox keys for staging/testnets.

Then expand the “Developers” section in the left-hand navigation and select “SDK and API Keys” to find your Dynamic Environment ID.

Copy the Dynamic Environment ID and return to the Crossmint developer console. Within the JWT authentication section, select “3P Auth providers” option, and then select Dynamic. Add your Environment ID and save changes.

You now have a properly configured client-side API key to use. Continue on to learn how to add Crossmint Smart Wallets to your application that uses Dynamic for authentication.

Integration Guide

To integrate Crossmint Smart Wallets with Dynamic as the auth provider you need to begin by configuring the environment ID you located in the above steps to work with the chain you want to create the smart wallet on. With the same project selected as above select the “Chains and Networks” option in the left-hand navigation.

Then click the EVM option to reveal a drawer where you can toggle chain support on and off.

Enable the desired chain for smart wallet support. In this guide, the example will be using polygon-amoy.

---

With the Dynamic environment ID configuration taken care of, you can now move on to integrating the smart wallets into your app.

Install the Crossmint React UI SDK:

pnpm i @crossmint/client-sdk-react-ui

Add your Crossmint client-side API key to your environment file:

.env.local

NEXT_PUBLIC_DYNAMIC_ENV_ID=_YOUR_DYNAMIC_ENV_ID_
NEXT_PUBLIC_CROSSMINT_API_KEY=_YOUR_CROSSMINT_API_KEY_

The providers.tsx code snippet below is adapted from the demo repository provided by Dynamic. You can view that repo here: https://github.com/dynamic-labs/nextjs-viem-wagmi.

Add a new file with the contents of the CrossmintWrapper.tsx tab to your app and then update your providers.tsx file as demonstrated.

---

Load/Create Smart Wallet Using a Wallet Connected via Dynamic.xyz

Using a wallet connected via the Dynamic.xyz SDK as the signer is demonstrated below. You simply pass that wallet as the signer to the getOrCreateWallet function.

Update the default page.tsx file with the content below. This will enable using a Dynamic.xyz embedded wallet or even a browser wallet connected through the Dynamic.xyz SDK.

page.tsx

"use client";

import { useEffect } from "react";
import { useWallet } from "@crossmint/client-sdk-react-ui";
import type { ExternalSigner } from "@crossmint/client-sdk-react-ui";
import { DynamicWidget } from "../lib/dynamic";
import { useDynamicContext, useUserWallets } from "@dynamic-labs/sdk-react-core";
import { isEthereumWallet } from "@dynamic-labs/ethereum";

export default function MyComponent() {
    const { getOrCreateWallet, wallet, status } = useWallet();
    const { primaryWallet: dynamicWallet } = useDynamicContext();

    useEffect(() => {
        const createWalletIfNeeded = async () => {
            if (!dynamicWallet || !isEthereumWallet(dynamicWallet)) {
                return;
            }

            if (status === "not-loaded") {
                const walletClient = await dynamicWallet?.getWalletClient();
                getOrCreateWallet({ type: "evm-smart-wallet", signer: walletClient as ExternalSigner });
            }
        };

        createWalletIfNeeded();
    }, [userWallets, status]);

    return (
        <>
            <DynamicWidget />
            <div>crossmint smart wallet: {wallet?.address}</div>
            <div>dynamic signer wallet: {dynamicWallet?.address}</div>
            <div>status: {status}</div>
        </>
    );
}

The above example is using the primaryWallet option from useDynamicContext, which automatically selects the main wallet for the logged in user.

If you need access to all wallets connected, you can use the useUserWallets hook instead.

Refer to this docs page for more info on Accessing Dynamic.xyz Wallets.

Troubleshooting Tips

If you’re following along using the repo linked above (https://github.com/dynamic-labs/nextjs-viem-wagmi) and are having build issues, check these tips:

Module not found: Can't resolve `rpc-websockets/dist/lib/client`

Solution: Add this to your package.json:

  "resolutions": {
    "rpc-websockets": "7.11.0"
  }

Then, run the install command for whichever package manager you’re using and restart the app:

Error: Chain (id: 11155111 name: Sepolia) is present in the Dynamic config, but is not present in the Wagmi configuration.

Solution: First, you need to configure the app to use polygon-amoy, which requires a few steps.

1. Ensure you’ve properly configured your Dynamic.xyz environment ID to use Polygon Amoy. See the intro to this Integration Guide section.

2. Adjust the wagmi config in /app/lib/wagmi.ts to use Polygon Amoy chain instead of Sepolia:

wagmi.ts

import { http, createConfig } from "wagmi";
import { polygonAmoy } from "wagmi/chains";

export const config = createConfig({
    chains: [polygonAmoy],
    multiInjectedProviderDiscovery: false,
    ssr: true,
    transports: {
        [polygonAmoy.id]: http(),
    },
});

declare module "wagmi" {
    interface Register {
        config: typeof config;
    }
}

Error: Chain (id: 80002 name: Polygon Amoy) is present in the Wagmi config, but is not present in the Dynamic configuration.

Solution: Make sure your providers.tsx file is loading the Dynamic.xyz environment ID from .env.local instead of using a default hardcoded value:

providers.tsx

  ...
  <DynamicContextProvider
      settings={{
        // CHECK THIS NEXT LINE
        environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID || "",
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
  ...