Quick Start: dApp Integration

Embed a smart wallet into your React application in under 5 minutes using the @embarkai/ui-kit package.

Prerequisites

Node.js 18+
A React 18+ project (Vite, Next.js, etc.)
An embarkAI project ID from dashboard.embarkai.io
Your app origin (for example http://localhost:5173) added under Settings → Domains & URLs of that project. Requests from origins that are not listed are rejected by CORS, and sign-in fails with ‘Failed to fetch’.

Installation

npm install @embarkai/ui-kit @tanstack/react-query i18next react-i18next

Minimal Working Example

1. Initialize i18n

Create an i18n.ts file in your project:


import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import { combineI18NResources, LOCAL_STORAGE_I18N_KEY } from '@embarkai/ui-kit'
 
i18n.use(initReactI18next).init({
  resources: combineI18NResources(),
  lng: localStorage.getItem(LOCAL_STORAGE_I18N_KEY) || 'en',
  fallbackLng: 'en',
  defaultNS: 'app',
  debug: false,
})
 
export default i18n

2. Set Up the Provider

Wrap your app with QueryClientProvider and the embarkAI Provider:


import './i18n'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Provider, ConnectWalletButton } from '@embarkai/ui-kit'
 
const queryClient = new QueryClient()
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Provider projectId="your-project-id">
        <main>
          <h1>My dApp</h1>
          <ConnectWalletButton label="Sign In" />
        </main>
      </Provider>
    </QueryClientProvider>
  )
}
 
export default App

That is it. Run your app and click Sign In to see the authentication dialog.

What Just Happened?

Provider initialized — The Provider component connects to embarkAI services and sets up MPC key management inside an isolated iframe.
User authenticated — When the user clicks ConnectWalletButton, they can sign in via email OTP, passkey, Telegram, or an external wallet.
Smart wallet created — After authentication, embarkAI runs the DKLS23 TSS protocol in the browser. The user’s keyshare is stored locally; no single party ever holds the full private key.
ERC-4337 smart wallet ready — The user now has an on-chain smart wallet that supports gasless transactions, batched calls, and social recovery.

Using Hooks

Once the user is connected, use hooks to access session data and send transactions:


import {
  useAccountSession,
  useBalance,
  useLoadingStatus,
  useSendTransaction,
} from '@embarkai/ui-kit'
 
function Dashboard() {
  const session = useAccountSession()
  const { isSessionLoading } = useLoadingStatus()
  const { walletBalance, cryptoSymbol } = useBalance()
  const { sendTransaction, isLoading } = useSendTransaction()
  if (isSessionLoading) return <p>Loading...</p>
  if (!session) return <p>Please connect your wallet.</p>
 
  const handleSend = async () => {
    const userOpHash = await sendTransaction({
      to: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e',
      value: '1000000000000000000', // 1 token in wei
      data: '0x',
    })
    console.log('UserOperation hash:', userOpHash)
  }
 
  return (
    <div>
      <p>Smart wallet: {session.smartAccountAddress}</p>
      <p>Balance: {walletBalance.formatted} {cryptoSymbol}</p>
      <button onClick={handleSend} disabled={isLoading}>
        {isLoading ? 'Sending...' : 'Send 1 Token'}
      </button>
    </div>
  )
}

Available Hooks

Hook	Returns
`useAccountSession()`	Current session with `ownerAddress`, `smartAccountAddress`, `address`
`useLoadingStatus()`	`{ isSessionLoading, sessionStatus }`
`useBalance()`	`{ walletBalance, fiatBalance, cryptoSymbol, fiatSymbol }`, `walletBalance` is `{ formatted, symbol, value, decimals }`
`useAddress()`	Current wallet address
`useActiveChainId()`	Current chain ID
`useSendTransaction()`	`{ sendTransaction, isLoading, error, userOpHash, reset }` for sending UserOperations
`useOpenPage()`	`{ isOpen, open, close }` for programmatic dialog control
`useColorMode()`	`{ colorMode, setColorMode }` for theme switching

Next Steps

Provider Configuration — network settings, auth methods, UI customization, and callbacks
Hooks Reference — complete reference for all available hooks