@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(): ProviderConfigProviderProps
| Prop | Type | Description |
|---|---|---|
config | ProviderConfig | SDK configuration (API key, chain, callbacks) |
children | ReactNode | Application tree |
Related Types
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.ElementExternal 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): booleanAccount 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: stringErrors
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