Frontend SDK

Embed smart wallet UI into your React application with @embarkai/ui-kit.

The @embarkai/ui-kit package provides a complete set of React components, hooks, and providers for integrating EmbarkAI smart wallets into your frontend application. It handles authentication (passkey, email, social login, external wallets), wallet management, transaction sending, and account abstraction — all with a pre-built, themeable UI.

What’s Included

Provider — Top-level context that configures authentication, chains, and wallet behavior.
ConnectWallet Button — Drop-in button that opens the login/signup flow.
Hooks — React hooks for session state, balances, transactions, and more.
Components — Pre-built UI pieces: UserOpStatus, Hash, Address, TransactionsList, KeyshareBackup.
Theming — Light/dark mode support with ThemeToggle and preferedColorMode config.
Internationalization — Multi-language support via LangToggle and custom translations.

Prerequisites

Requirement	Version
React	18+
wagmi	2.x
@tanstack/react-query	5.x
viem	2.x

Installation


npm install @embarkai/ui-kit


pnpm add @embarkai/ui-kit


yarn add @embarkai/ui-kit


bun add @embarkai/ui-kit

Peer dependencies are installed automatically. If your bundler complains, install them explicitly:


npm install wagmi viem @tanstack/react-query


pnpm add wagmi viem @tanstack/react-query


yarn add wagmi viem @tanstack/react-query


bun add wagmi viem @tanstack/react-query

Quick Start


import { Provider, ConnectWalletButton } from '@embarkai/ui-kit'
 
function App() {
  return (
    <Provider projectId="your-project-id">
      <ConnectWalletButton />
      {/* Your app content */}
    </Provider>
  )
}

The Provider sets up wagmi, session management, and the secure MPC iframe automatically. No additional configuration is required to get started — just pass your projectId from the EmbarkAI Dashboard .

Key Exports

Hooks

Hook	Description
`useSession`	Access session state, active chain, wallet addresses
`useBalance`	Fetch native and token balances
`useSendTransaction`	Send UserOperations via the smart account
`useUserOpStatus`	Track UserOperation lifecycle
`useAddress`	Get the current smart account address
`useActiveChainId`	Get/set the active chain
`useAccountSession`	Access full account session data
`useLogout`	Programmatic logout
`useWalletMode`	Check if using linked (AA) or direct wallet mode
`useNicknameResolve`	Resolve human-readable nicknames to addresses

Components

Component	Description
`ConnectWalletButton`	Full login/signup flow in one button
`UserOpStatus`	Display UserOperation status with auto-updates
`Hash`	Render a transaction/operation hash with copy and explorer link
`Address`	Render an address with ENS resolution and copy
`TransactionsList`	List of recent smart account transactions
`KeyshareBackup`	UI for backing up MPC keyshares
`ThemeToggle`	Light/dark mode toggle
`LangToggle`	Language selector

Advanced APIs

For lower-level operations, the package also exports imperative functions:

sendUserOperation / prepareUserOperation — Build and submit UserOperations directly.
signTypedData — EIP-712 typed data signing.
deployAccount — Deploy the smart account on-chain.
getAllSmartAccounts / getSmartAccountForChain — Query registered smart accounts.
getUserOperationReceipt / waitForUserOperationReceipt — Poll for UserOp receipts.
logout / jwtTokenManager / getValidTokens — Auth token management.

Next Steps

Set up the Provider with your project configuration.
Add the ConnectWallet button to your app.
Use hooks to interact with the wallet.