Compose SDK

The Compose SDK is a React-first TypeScript library for Account Abstraction (AA) that enables multi-chain atomic user operations. Built on top of ZeroDev Kernel V3.1, it provides React hooks and components for easily creating smart accounts and executing cross-chain transactions atomically in your React applications.

Development Notice

This SDK is currently under active development and testing. It is not recommended for production use at this time.

Installation

# Using npm
npm install @ssv-labs/compose-sdk

# Using yarn
yarn add @ssv-labs/compose-sdk

# Using pnpm
pnpm install @ssv-labs/compose-sdk

Peer Dependencies

The SDK requires the following peer dependencies:

npm install @wagmi/core wagmi viem @tanstack/react-query react

Quick Start

1. Setup Configuration

First, create your compose configuration:

// config.ts
import { createComposeConfig } from '@ssv-labs/compose-sdk';
import { createConfig, http } from '@wagmi/core';
import { createPublicClient, rpcSchema } from 'viem';
import { injected } from 'wagmi/connectors';
import { rollupA, rollupB, rollupsAccountAbstractionContracts } from '@ssv-labs/compose-sdk';
import type { ComposeRpcSchema } from '@ssv-labs/compose-sdk';

// Create wagmi config
export const wagmiConfig = createConfig({
  chains: [rollupA, rollupB],
  connectors: [injected()], // Required for wallet connection
  client(parameters) {
    return createPublicClient({
      chain: parameters.chain,
      transport: http(parameters.chain.rpcUrls.default.http[0]),
      rpcSchema: rpcSchema<ComposeRpcSchema>()
    });
  }
});

// Create compose config
export const composeConfig = createComposeConfig({
  wagmi: wagmiConfig,
  accountAbstractionContracts: {
    // Use predefined contracts
    [rollupA.id]: rollupsAccountAbstractionContracts,
    [rollupB.id]: rollupsAccountAbstractionContracts
    // Or provide your own account abstraction contracts:
    // [rollupA.id]: {
    //   kernelImpl: '0x...',
    //   kernelFactory: '0x...',
    //   multichainValidator: '0x...',
    //   metaFactory: '0x...'
    // },
  }
});

2. Setup React Providers

Wrap your app with the required providers:

// App.tsx
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ComposeProvider } from '@ssv-labs/compose-sdk/react';
import { wagmiConfig, composeConfig } from './config';

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ComposeProvider config={composeConfig as any}>
          <YourApp />
        </ComposeProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

3. Use the Smart Account Hook

Use the useSmartAccount hook in your components:

// MyComponent.tsx
import { useSmartAccount } from '@ssv-labs/compose-sdk/react';
import { rollupA, rollupB } from '@ssv-labs/compose-sdk';
import { useAccount } from 'wagmi';

function MyComponent() {
  const { isConnected } = useAccount();

  // The hook returns a query object - access .data and .isLoading from it
  // Note: multiChainIds is required for cross-chain functionality
  const smartAccountQuery = useSmartAccount({
    chainId: rollupA.id,
    multiChainIds: [rollupA.id, rollupB.id],
  });

  if (!isConnected) {
    return <div>Please connect your wallet</div>;
  }

  // Access isLoading from the query object
  if (smartAccountQuery.isLoading) {
    return <div>Creating smart account...</div>;
  }

  // Access the account address via data?.account.address
  // The structure is: query.data.account.address (not query.data.address)
  const smartAccountAddress = smartAccountQuery.data?.account?.address;

  return (
    <div>
      <h2>Your Smart Account</h2>
      {smartAccountAddress ? (
        <p>Address: {smartAccountAddress}</p>
      ) : (
        <p>No smart account found</p>
      )}
    </div>
  );
}

Core Concepts

Configuration

The createComposeConfig function sets up the SDK with your wagmi configuration and account abstraction contracts. It requires:

• wagmi: Your wagmi config instance
• accountAbstractionContracts: A mapping of chain IDs to their account abstraction contract addresses
• getPaymasterEndpoint (optional): Function to get paymaster endpoint URLs for gasless transactions

React Hooks

The SDK provides React hooks for easy integration:

• useComposeConfig: Access the compose configuration from context
• useSmartAccount: Create and access a smart account for a specific chain

### Paymaster Setup

To enable paymaster support, provide a `getPaymasterEndpoint` function:

```typescript
const composeConfig = createComposeConfig({
  wagmi: wagmiConfig,
  accountAbstractionContracts: {
    /* ... */
  },
  getPaymasterEndpoint: ({ method, chainId }) => {
    return `https://paymaster.example.com/${chainId}/${method}`;
  }
});

The paymaster endpoint should support the following methods:

• pm_sponsorUserOperation
• pm_getPaymasterStubData
• pm_getPaymasterData

Chain Configuration

The SDK includes predefined chain configurations:

• rollupA (Chain ID: 11113)
• rollupB (Chain ID: 22224)
• hoodi (Chain ID: 560048)

You can also use custom chains by defining them with viem's defineChain.