Skip to Content
API Reference@embarkai/ui-kit

@embarkai/ui-kit API

API reference for the React UI Kit package.

The @embarkai/ui-kit package provides React components, hooks, and providers for integrating EmbarkAI smart wallets into any React application.

import { Provider, useSession, useSendTransaction, ConnectWalletButton } from '@embarkai/ui-kit';

Provider

The root provider that initializes wallet state, session management, and theme context.

function Provider(props: ProviderProps): JSX.Element function useProviderConfig(): ProviderConfig

ProviderProps

PropTypeDescription
configProviderConfigSDK configuration (API key, chain, callbacks)
childrenReactNodeApplication tree
interface ProviderConfig { apiKey: string chainId: number callbacks?: CallbacksConfig walletMode?: WalletMode watchTokens?: WatchToken[] } interface CallbacksConfig { onLogin?: (userId: string) => void onLogout?: () => void onTransactionSent?: (hash: string) => void } type WalletMode = 'embedded' | 'external' | 'hybrid'

Session Hooks

Hooks for reading session state and account information.

function useSession(): { isLoggedIn: boolean; userId: string | null; login: () => void; logout: () => void } function useAccountSession(): { address: string | null; chainId: number; isDeployed: boolean } function useAddress(): `0x${string}` | null function useBalance(): { value: bigint; formatted: string; isLoading: boolean } function useLoadingStatus(): { isReady: boolean; stage: string } function useActiveChainId(): number function useIFrameReady(): boolean function useError(): Error | null function useRecoveryUserId(): string | null function useHasServerVault(): boolean function useHydrated(): boolean function useIsMobileView(): boolean function useOpenPage(): (page: string) => void function useColorMode(): { mode: 'light' | 'dark'; toggle: () => void } function useLogout(): () => Promise<void>

Transaction Hooks

Hooks for sending ERC-4337 user operations and tracking their status.

function useSendTransaction(): { sendTransaction: (params: { to: string; value?: bigint; data?: string }) => Promise<string> isLoading: boolean error: Error | null } function useUserOpStatus(hash: string | null): { status: 'pending' | 'confirmed' | 'failed' | null receipt: object | null } function useTransactions(): { transactions: object[]; isLoading: boolean } function useSmartAccountTransactions(): { transactions: object[]; isLoading: boolean }

Asset Hooks

Hooks for reading token balances and metadata.

function useAssets(): { assets: object[]; isLoading: boolean; refetch: () => void } function useTokenInfo(address: string): { name: string; symbol: string; decimals: number } | null function useTokenBalance(tokenAddress: string): { value: bigint; formatted: string; isLoading: boolean }

Components

Pre-built UI components for common wallet interactions.

function ConnectWalletButton(props?: { label?: string; className?: string }): JSX.Element function ThemeToggle(): JSX.Element function LangToggle(): JSX.Element function UserOpStatus(props: { hash: string }): JSX.Element function Hash(props: { value: string; truncate?: boolean }): JSX.Element function Address(props: { value: string; truncate?: boolean }): JSX.Element function TransactionsList(): JSX.Element function KeyshareBackup(): JSX.Element

External Wallet

Hooks for connecting external wallets (e.g. MetaMask) and bridging funds.

function useWalletMode(): WalletMode function useDirectWallet(): { address: string | null; isConnected: boolean; connect: () => void } function useSendDirectTransaction(): (params: { to: string; value?: bigint; data?: string }) => Promise<string> function useTransferToLinkedWallet(): (amount: bigint, tokenAddress?: string) => Promise<string>

Compliance

ERC-3643 regulatory compliance hook.

function useErc3643Compliance(): { isCompliant: boolean checkCompliance: (address: string) => Promise<boolean> }

Nickname

Human-readable address resolution.

function useNicknameResolve(): { resolve: (nickname: string) => Promise<string | null> isLoading: boolean } function looksLikeNickname(value: string): boolean

Account Operations

Imperative functions for smart account management and signing.

function sendUserOperation(params: { to: string; value?: bigint; data?: string }): Promise<string> function prepareUserOperation(params: { to: string; value?: bigint; data?: string }): Promise<object> function signTypedData(domain: object, types: object, value: object): Promise<string> function deployAccount(chainId: number): Promise<string> function getAllSmartAccounts(): Promise<object[]> function getSmartAccountForChain(chainId: number): Promise<object | null>

Receipt

Utilities for polling and waiting on user operation results.

function getUserOperationByHash(hash: string): Promise<object | null> function getUserOperationReceipt(hash: string): Promise<object | null> function waitForUserOperationReceipt(hash: string, options?: { timeout?: number }): Promise<object> class UserOperationTimeoutError extends Error {}

Auth API

Re-exported auth utilities from @embarkai/core.

function logout(): Promise<void> const jwtTokenManager: JwtTokenManager function getValidTokens(): Promise<JwtTokens>

Profile

User profile management and linked identity hooks.

function getUserProfile(): Promise<object> function updateUserProfile(data: object): Promise<object> function useLinkedProfiles(): { profiles: object[]; isLoading: boolean }

i18n

Internationalization utilities and translation resources.

function combineI18NResources(...resources: object[]): object function getAvailableLanguages(): string[] function getLanguageIcon(lang: string): string const PASSPORT_TRANSLATIONS: object const LOCAL_STORAGE_I18N_KEY: string

Errors

Standardized error classes for account abstraction failures.

class AccountAbstractionError extends Error { code: number constructor(message: string, code: number) } class UserRejectedError extends AccountAbstractionError {} function createAccountAbstractionError(code: number, message: string): AccountAbstractionError const ErrorCodes: { USER_REJECTED: number INSUFFICIENT_FUNDS: number EXECUTION_REVERTED: number BUNDLER_ERROR: number }

Iframe Manager

Low-level iframe lifecycle control used internally by the Provider.

function getIframeManager(): object function destroyIframeManager(): void type WalletReadyStatus = 'loading' | 'ready' | 'error'

Wagmi Config

Pre-configured wagmi instance for external wallet connections.

const wagmiConfig: object
Last updated on