Skip to main content

Installation & Setup

This guide will help you set up the SCS Account Abstraction toolkit in your project.

Prerequisites​

  • Node.js 18 or later
  • A React/Next.js project
  • Basic understanding of Ethereum and smart contracts

Core Dependencies​

Install the essential packages for Account Abstraction development:

npm install @startale-scs/aa-sdk @rhinestone/module-sdk @dynamic-labs/sdk-react-core viem wagmi

Package Overview​

PackagePurpose
@startale-scs/aa-sdkCore SDK for Startale smart accounts and clients
@rhinestone/module-sdkERC-7579 modules for social recovery and sessions
@dynamic-labs/sdk-react-coreWallet connection and authentication
viemLow-level Ethereum interactions
wagmiReact hooks for Ethereum

Project Configuration​

1. Environment Setup​

Create a .env.local file with your configuration:

# Soneium Network Configuration
NEXT_PUBLIC_MINATO_RPC=https://rpc.minato.soneium.org
NEXT_PUBLIC_BUNDLER_URL=https://soneium-minato.bundler.scs.startale.com?apikey=YOUR_API_KEY
NEXT_PUBLIC_PAYMASTER_URL=https://paymaster.scs.startale.com/v1?apikey=YOUR_API_KEY

# Contract Addresses (Soneium Minato)
NEXT_PUBLIC_ACCOUNT_RECOVERY_MODULE=0xA04D053b3C8021e8D5bF641816c42dAA75D8b597
NEXT_PUBLIC_MOCK_ATTESTER=0xaeD4d8bAa80948d54d33dE041513D30124e1Ae3f
NEXT_PUBLIC_ECDSA_VALIDATOR=0x00000072F286204Bb934eD49D8969E86F7dEC7b1

2. Wagmi Configuration​

Set up wagmi with Soneium network support:

config/wagmi.ts
import { soneiumMinato } from 'viem/chains'
import { createConfig, http } from 'wagmi'

export const config = createConfig({
  chains: [soneiumMinato],
  transports: {
    [soneiumMinato.id]: http(),
  }
})

3. Dynamic Labs Setup​

Configure Dynamic Labs for wallet connections:

config/dynamic.ts
export const dynamicEnvironmentId = 'your-dynamic-environment-id'

export const dynamicSettings = {
  environmentId: dynamicEnvironmentId,
  walletConnectors: ['embedded'],
}

Network Configuration​

The toolkit supports Soneium networks with the following configuration:

config/aa.ts
import type { Address } from 'viem'
import { soneiumMinato } from 'viem/chains'

export const AA_CONFIG = {
  // Network
  CHAIN: soneiumMinato,
  RPC_URL: process.env.NEXT_PUBLIC_MINATO_RPC,

  // Infrastructure
  BUNDLER_URL: process.env.NEXT_PUBLIC_BUNDLER_URL,
  PAYMASTER_URL: process.env.NEXT_PUBLIC_PAYMASTER_URL,

  // Contract Addresses
  ACCOUNT_RECOVERY_MODULE: process.env.NEXT_PUBLIC_ACCOUNT_RECOVERY_MODULE as Address,
  MOCK_ATTESTER: process.env.NEXT_PUBLIC_MOCK_ATTESTER as Address,
  ECDSA_VALIDATOR: process.env.NEXT_PUBLIC_ECDSA_VALIDATOR as Address,
}

Provider Setup​

Wrap your app with the necessary providers:

app/layout.tsx
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './config/wagmi'
import { dynamicSettings } from './config/dynamic'

const queryClient = new QueryClient()

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <DynamicContextProvider settings={dynamicSettings}>
          <WagmiProvider config={config}>
            <QueryClientProvider client={queryClient}>
              {children}
            </QueryClientProvider>
          </WagmiProvider>
        </DynamicContextProvider>
      </body>
    </html>
  )
}

Next Steps​

With your environment configured, you're ready to:

  1. Create your first smart account
  2. Implement sponsored transactions
  3. Add social recovery
  4. Set up smart sessions

Troubleshooting​

Common Issues​

TypeScript errors with viem types:

npm install --save-dev @types/node

Module resolution issues:

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  }
}

Dynamic Labs configuration:

  • Ensure your environment ID matches your Dynamic Labs dashboard
  • Check that wallet connectors are properly configured