Add Sub Accounts to Onchainkit/Minikit

This guide will show you how to add Sub Accounts to your existing OnchainKit or MiniKit project.

Sub Accounts allow you to create a seamless user experience by skipping transaction confirmations, you can read more about it in the Sub Accounts Intro Page.

Before you start, make sure you have checked the following guides:

• OnchainKit Quickstart
• MiniKit Quickstart
• OnchainKit Custom Providers
• Sub Accounts Intro Page

​

Skip ahead

If you want to skip ahead and just get the final code, you can find it here:

​

Add Sub Accounts to your OnchainKit/MiniKit project

​

Override the default Coinbase Wallet SDK version

Currently, Sub Accounts are only available in the Smart Wallet development environment (Canary version).

To override the default Coinbase Wallet SDK version, you can run the following command:

npm @coinbase/wallet-sdk@canary install

rm -rf node_modules package-lock.json
npm install

​

Setting up the Wagmi config

Make sure to update your wagmi.ts file to include the following:

import { http, cookieStorage, createConfig, createStorage } from "wagmi";
import { baseSepolia, base } from "wagmi/chains";
import { coinbaseWallet } from "wagmi/connectors";
import { parseEther, toHex } from "viem";

export function getConfig() {
  return createConfig({
    chains: [baseSepolia, base],
    connectors: [
      coinbaseWallet({
        appName: "My Sub Account Mini App Demo",
        preference: {
          keysUrl: "https://keys-dev.coinbase.com/connect",
          options: "smartWalletOnly",
        },
        subAccounts: {
          enableAutoSubAccounts: true,
          defaultSpendLimits: {
            84532: [ // Base Sepolia Chain ID
              {
                token: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
                allowance: toHex(parseEther('0.01')), // 0.01 ETH
                period: 86400, // 24h
              },
            ],
          },
        },
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [baseSepolia.id]: http(),
      [base.id]: http(),
    },
  });
}

declare module "wagmi" {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

Let’s break down the key preference parameters:

• keysUrl: Points to the development environment for Smart Wallet testing

• options: 'smartWalletOnly': Ensures only Smart Wallet mode is used

• enableAutoSubAccounts: true: When set to true, automatically creates a Sub Account at connection

• defaultSpendLimits: Configures Spend Limits for Sub Account for a network (eg. Base Sepolia 84532), including:

  • Token address (In this case, 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE represents the native ETH)
  • Allowance WEI amount (in Hex)
  • Time period for the allowance (in seconds, e.g., 86400 for 24 hours)

​

Setting up the OnchainKit/MiniKit providers config

Once the wagmi.ts file is updated, you can update your providers.tsx file to include the following:

"use client";

import { type ReactNode, useState } from "react";
import { baseSepolia } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { MiniKitProvider } from "@coinbase/onchainkit/minikit";
import { type State, WagmiProvider } from "wagmi";
import { getConfig } from "@/wagmi";

export function Providers(props: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getConfig());
  const [queryClient] = useState(() => new QueryClient());

  return (
    <WagmiProvider config={config} initialState={props.initialState}>
      <QueryClientProvider client={queryClient}>
        <MiniKitProvider
          apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
          chain={baseSepolia}
          config={{
            appearance: {
              mode: "auto",
              theme: "mini-app-theme",
              name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
              logo: process.env.NEXT_PUBLIC_ICON_URL,
            },
          }}
        >
          {props.children}
        </MiniKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

​

Run your app

After installing the dependencies as described above, make sure your environment variables are up to date as per the OnchainKit Quickstartor MiniKit Quickstart.

Then, you can run the app with the following command:

npm run dev

Congratulations! You’ve successfully added Sub Accounts to your OnchainKit/MiniKit project.

If you have any questions, join the #smart-wallet channel on Discord.