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.lumiapassport.com

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, isPending } = useSendTransaction()
 
  if (isSessionLoading) return <p>Loading...</p>
  if (!session) return <p>Please connect your wallet.</p>
 
  const handleSend = async () => {
    const userOpHash = await sendTransaction({
      to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
      value: '1000000000000000000', // 1 token in wei
      data: '0x',
    })
    console.log('UserOperation hash:', userOpHash)
  }
 
  return (
    <div>
      <p>Smart wallet: {session.accountAddress}</p>
      <p>Balance: {walletBalance} {cryptoSymbol}</p>
      <button onClick={handleSend} disabled={isPending}>
        {isPending ? 'Sending...' : 'Send 1 Token'}
      </button>
    </div>
  )
}

Available Hooks

Hook	Returns
`useAccountSession()`	Current session with `userId`, `ownerAddress`, `accountAddress`
`useLoadingStatus()`	`{ isSessionLoading, sessionStatus }`
`useBalance()`	`{ walletBalance, fiatBalance, cryptoSymbol, fiatSymbol }`
`useAddress()`	Current wallet address
`useActiveChainId()`	Current chain ID
`useSendTransaction()`	`{ sendTransaction, isPending }` 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