Skip to Content
API Reference@embarkai/ui-kit

@embarkai/ui-kit API

API reference for the React UI Kit package (@embarkai/ui-kit 0.4.95).

The @embarkai/ui-kit package provides React components, hooks, and providers for integrating embarkAI smart wallets into any React application. Signatures below are copied from the package’s type declarations.

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

Provider

The root provider that initializes wagmi, the secure MPC iframe, session state and theme context.

import type { JSX, ReactNode } from 'react' import type { CallbacksConfig, ProviderConfig } from '@embarkai/ui-kit' interface ProviderProps { children: ReactNode projectId?: string initialConfig?: Partial<ProviderConfig> callbacks?: CallbacksConfig } declare function Provider(props: ProviderProps): JSX.Element

initialConfig is deep-merged with the defaults at runtime, but in 0.4.95 it is typed as a shallow Partial<ProviderConfig>: any section you pass must be complete.

ProviderConfig

import type { Asset } from '@embarkai/ui-kit' type WalletMode = 'linked' | 'direct' | 'both' interface ProjectAsset extends Omit<Asset, 'type'> { type: 'project' balanceQueryKey: string[] balanceQuery: () => Promise<unknown> hideInPortfolio?: boolean } interface SocialProvider { id: string name: string enabled: boolean icon: React.FC<React.SVGProps<SVGSVGElement>> comingSoon?: boolean meta?: Record<string, any> } interface ProviderConfig { projectId: string passkey: { enabled: boolean; showCreateButton: boolean; primaryButtonText: string } email: { enabled: boolean; placeholder: string; buttonText: string; verificationTitle: string } social: { enabled: boolean; providers: SocialProvider[] } wallet: { enabled: boolean supportedChains?: number[] requireSignature: boolean walletConnectProjectId?: string mode?: WalletMode allowedWallets?: string[] } preferedColorMode?: 'light' | 'dark' showBalanceAs?: Asset['symbol'] | Record<number, Asset['symbol']> projectAssets?: { assets: ProjectAsset[] } portfolio?: { tokenBalancesQuery?: (address: `0x${string}`) => Promise<unknown[]> tokenBalancesQueryKey?: readonly unknown[] assetRateQuery?: (input: unknown) => Promise<unknown | null> assetRateQueryKey?: readonly unknown[] } watchTokens?: { [chainId: number]: WatchToken[] } ui: { title: string subtitle?: string useExternalIcons?: boolean dialogClassName?: string authOrder?: ('email' | 'social' | 'wallet')[] } network: { name: string symbol: string chainId: number rpcUrl: string explorerUrl?: string testnet?: boolean forceChain?: boolean autoswitch?: boolean } services: { assetApiUrl?: string tssUrl: string shareVaultUrl: string dashboardApiUrl?: string iframeUrl?: string tssRequireWasm?: boolean tssWasmDebug?: boolean } features: { mpcSecurity: boolean strictMode: boolean requestDeduplication: boolean kycNeeded?: boolean displayNameNeeded?: boolean showActiveBalanceAsFiat?: boolean showAssetBridge?: boolean } warnings: { backupWarning: boolean; emailNotConnectedWarning: boolean } kyc?: { provider?: 'sumsub' | 'uaepass' | 'custom'; options?: Record<string, any> } translations?: Record<string, Record<string, unknown>> } interface WatchToken { address: `0x${string}` symbol: string name?: string decimals?: number logo?: string }

The portfolio query callbacks are typed against the Blockscout client types from @embarkai/core (BlockscoutTokenBalance[], AssetRateQueryInput, AssetRateQueryResult); they are shown loosely here.

CallbacksConfig

interface CallbacksConfig { onConnecting?: (payload: { method: 'passkey' | 'email' | 'social' | 'wallet'; provider?: string }) => void onConnect?: (payload: { address: `0x${string}`; session: any }) => void onAccount?: (payload: { userId?: string | null; address?: `0x${string}` | null; session?: any; hasKeyshare?: boolean }) => void onAccountUpdate?: (payload: { providers?: Array<any> }) => void onDisconnect?: (payload: { address?: `0x${string}` | null; userId?: string | null }) => void onError?: (payload: { error: Error; code?: string; message: string }) => void onChainChange?: (payload: { chainId: number; previousChainId: number }) => void onWalletReady?: (status: WalletReadyStatus) => void } interface WalletReadyStatus { ready: boolean userId?: string address?: `0x${string}` hasKeyshare: boolean hasSession: boolean timestamp: number }

useProviderConfig

import type { RefObject } from 'react' import type { CallbacksConfig, ProviderConfig } from '@embarkai/ui-kit' interface UIContextType { config: RefObject<ProviderConfig> updateConfig: (updates: Partial<ProviderConfig>) => void callbacksRef: RefObject<CallbacksConfig | undefined> updateCallbacks: (updates: Partial<CallbacksConfig> | null) => void /** @deprecated non-reactive snapshot; read callbacksRef instead */ callbacks?: CallbacksConfig } declare function useProviderConfig(): UIContextType

Session Hooks

Hooks for reading session state and account information.

import type { AccountSession, WalletReadyStatus } from '@embarkai/ui-kit' import type { ChainConfig } from '@embarkai/core/read' import type { Chain, PublicClient } from 'viem' interface SessionState { session: AccountSession | null address: `0x${string}` | null status: string error: string | null recoveryUserId: string | null isIframeReady: boolean usePaymaster: boolean hasServerVault: boolean isServerVaultChecked: boolean isLoading: boolean activeChainId: number | null publicClient: PublicClient | null bundlerClient: unknown | null chainConfig: ChainConfig | null viemChain: Chain | null walletReadyStatus: WalletReadyStatus | null hasHydrated: boolean } declare function useSession<T>(selector: (state: SessionState) => T): T declare function useAccountSession(): AccountSession declare function useAddress(): `0x${string}` declare function useActiveChainId(): number declare function useLoadingStatus(): { isSessionLoading: boolean; sessionStatus: string } declare function useIFrameReady(): boolean declare function useError(): string declare function useRecoveryUserId(): string declare function useHasServerVault(): boolean declare function useHydrated(): boolean declare function useIsMobileView(): boolean declare function useColorMode(): { colorMode: 'light' | 'dark'; setColorMode: (mode: 'light' | 'dark') => void } declare function useLogout(): { logout: () => Promise<void> } declare const requireActiveChainId: () => number declare function waitForStoreHydration(): Promise<void>

useAccountSession() and useAddress() are typed as always present but return null while there is no session; guard with useHydrated() and useLoadingStatus().

interface AccountSession { ownerAddress: `0x${string}` smartAccountAddress: `0x${string}` factoryAddress: `0x${string}` ownerPrivateKey?: `0x${string}` mpcUserId?: string usePaymaster?: boolean kind: 'lumia' address: `0x${string}` }

SessionState is the zustand store behind useSession; besides the fields above it exposes setters (setSession, setAddress, setActiveChainId, setActiveChain, …). The interface itself is not exported from the package.


Transaction Hooks

Hooks for sending ERC-4337 UserOperations and tracking their status.

interface SendTransactionParams { to: `0x${string}` value: string data?: `0x${string}` assetType?: 'native' | 'erc20' | 'erc721' | 'erc1155' | 'erc3643' tokenAddress?: `0x${string}` tokenId?: string decimals?: number } interface UseSendTransactionReturn { sendTransaction: (params: SendTransactionParams) => Promise<string | null> isLoading: boolean error: string | null userOpHash: string | null reset: () => void } declare function useSendTransaction(): UseSendTransactionReturn

value is human-readable (e.g. "1.5"); the hook applies decimals for token transfers.

import type { UserOperationReceipt, UserOpMempool } from '@embarkai/ui-kit' type UserOpState = 'waiting' | 'pending' | 'included' | 'failed' | 'rejected' | 'timeout' interface UseUserOpStatusOptions { userOpHash?: `0x${string}` | string | null pollMs?: number maxPollTimeMs?: number enabled?: boolean onStateChange?: (state: UserOpState) => void onReceipt?: (receipt: UserOperationReceipt) => void onTxHash?: (txHash: `0x${string}`) => void } interface UseUserOpStatusReturn { state: UserOpState receipt: UserOperationReceipt | null mempool: UserOpMempool | null txHash: `0x${string}` | null error: string | null isPolling: boolean refresh: () => Promise<void> } declare function useUserOpStatus(options?: UseUserOpStatusOptions): UseUserOpStatusReturn
import type { Hash, TransactionReceipt } from 'viem' declare function useTransactions(): { sendTransaction: (params: Transaction) => Promise<{ hash: Hash; wait: () => Promise<TransactionReceipt> }> getTransaction: (hash: Hash) => Promise<unknown> getTransactionReceipt: (hash: Hash) => Promise<TransactionReceipt> getTransactionHistory: (address: `0x${string}`, limit?: number) => Promise<Transaction[]> address: `0x${string}` isConnected: boolean } declare function useSmartAccountTransactions(): { getUserOperations: (address: `0x${string}`, fromBlock?: bigint | 'earliest', toBlock?: bigint | 'latest') => Promise<UserOperation[]> getRecentUserOperations: (address: `0x${string}`, limit?: number) => Promise<UserOperation[]> getTransactionDetails: (txHash: Hash) => Promise<{ transaction: unknown; receipt: TransactionReceipt }> } interface Transaction { to: `0x${string}` value: string data?: `0x${string}` gasLimit?: string } interface UserOperation { hash: Hash sender: `0x${string}` nonce: bigint success: boolean actualGasCost: bigint blockNumber: bigint timestamp: number transactionHash: Hash }

Asset Hooks

Hooks for reading token balances and metadata.

import type { Asset } from '@embarkai/ui-kit' declare const useBalance: () => { walletBalance: { decimals: number; formatted: string; symbol: string; value: bigint } fiatBalance: number cryptoRate: number fiatSymbol: string cryptoSymbol: string } declare function useAssets(address?: `0x${string}`): { nativeBalance: { decimals: number; symbol: string; value: bigint } tokenBalances: ({ result: unknown; status: 'success' } | { error: Error; status: 'failure' })[] assets: Asset[] getTokenBalance: (tokenAddress: `0x${string}`) => { address: `0x${string}` name: string symbol: string decimals: number balance: string formattedBalance: string logo: string } refreshBalances: () => Promise<void> isLoading: boolean isConnected: boolean } declare function useTokenInfo(tokenAddress: `0x${string}`): { isLoading: boolean tokenInfo: { name: string; symbol: string; decimals: number; address: `0x${string}` } | undefined } declare function useTokenBalance( tokenAddress: `0x${string}`, userAddress?: `0x${string}`, ): { balance: bigint formattedBalance: string tokenInfo: any isLoading: boolean refetch: () => Promise<unknown> }
import type { Asset } from '@embarkai/ui-kit' interface UseBlockscoutAssetsOptions { address: `0x${string}` | undefined chainId?: number enabled?: boolean detectSecurityTokens?: boolean } interface AssetListError { type: 'network' | 'api' | 'timeout' | 'unknown' message: string retryable: boolean } interface UseBlockscoutAssetsResult { nativeBalance: { value: bigint; formatted: string; symbol: string } | null assets: Asset[] isLoading: boolean isFetching: boolean isInitialLoading: boolean error: AssetListError | null isBlockscoutAvailable: boolean refreshBalances: () => Promise<void> getTokenBalance: (tokenAddress: `0x${string}`) => Asset | null lastUpdated: number | null } declare function useBlockscoutAssets(options: UseBlockscoutAssetsOptions): UseBlockscoutAssetsResult

Asset extends NormalizedAsset from @embarkai/core (type, address?, name, symbol, balance, formattedBalance, decimals?, tokenId?, logo?, image?) with exchangeRateUsd?, nftMetadata? and complianceStatus?.


Components

Pre-built UI components for common wallet interactions.

import type { FC, HTMLAttributes, JSX } from 'react' interface ConnectWalletButtonProps { ConnectButton?: FC<HTMLAttributes<HTMLButtonElement>> className?: string label?: string // default 'Connect Wallet' usePaymaster?: boolean } type ChainLike = { id: number; blockExplorers?: { default?: { url: string } } } type UserOpStatusProps = { userOpHash: `0x${string}` | string chain?: ChainLike chainId?: number className?: string pollMs?: number // default 1000 maxPollTimeMs?: number // default 60000 externalState?: { receipt?: any | null; mempool?: any | null; error?: string | null; isPolling?: boolean } } type HashProps = { hash?: `0x${string}` | string | null chain?: ChainLike className?: string truncate?: boolean // default true showCopy?: boolean // default true showExplorer?: boolean // default true, requires chain kind?: 'tx' | 'address' | 'block' // default 'tx' label?: string } type AddressProps = { address?: `0x${string}` | string | null chain?: ChainLike className?: string truncate?: boolean showCopy?: boolean showExplorer?: boolean label?: string } interface TransactionsListProps { address: string itemsCount?: number } declare function ConnectWalletButton(props: ConnectWalletButtonProps): JSX.Element declare function UserOpStatus(props: UserOpStatusProps): JSX.Element declare function Hash(props: HashProps): JSX.Element declare function Address(props: AddressProps): JSX.Element declare function TransactionsList(props: TransactionsListProps): JSX.Element declare function ThemeToggle(props: HTMLAttributes<HTMLButtonElement>): JSX.Element declare function LangToggle(props: HTMLAttributes<HTMLButtonElement>): JSX.Element declare function KeyshareBackup(): JSX.Element

ThemeToggle and LangToggle take the kit’s internal ButtonProps; standard button attributes are shown here. KeyshareBackup is exported as an alias of the internal KeyshareBackupMenu.

Also exported: ErrorBoundary (with ErrorBoundaryProps { onErrorBoundaryStateChange?, onComponentDidCatch?, onComponentDidUpdate?, FallbackComponent? }) and Expandable.


External Wallet

Hooks for connecting external wallets (e.g. MetaMask) and moving funds between the smart account and a linked wallet.

type WalletMode = 'linked' | 'direct' | 'both' type ConnectFlowType = 'link' | 'connect' | 'auth' interface UseWalletModeReturn { configMode: WalletMode activeMode: WalletMode switchMode: (mode: 'linked' | 'direct') => void isDirect: boolean } interface UseDirectWalletReturn { address: `0x${string}` | null chainId: number | null isConnected: boolean connectorName: string | null connect: (connectFlowType?: ConnectFlowType) => void reconnect: (connectFlowType?: ConnectFlowType) => void disconnect: () => void } interface DirectTransactionParams { to: `0x${string}` value: string data?: `0x${string}` chainId?: number } interface UseSendDirectTransactionReturn { sendTransaction: (params: DirectTransactionParams) => Promise<`0x${string}` | null> isPending: boolean error: string | null txHash: `0x${string}` | null reset: () => void } interface TransferToLinkedParams { token: `0x${string}` | 'native' amount: string chainId: number decimals?: number toAddress?: `0x${string}` } interface UseTransferToLinkedReturn { transfer: (params: TransferToLinkedParams) => Promise<string | null> isPending: boolean error: string | null userOpHash: string | null linkedWallets: `0x${string}`[] reset: () => void } declare function useWalletMode(): UseWalletModeReturn declare function useDirectWallet(): UseDirectWalletReturn declare function useSendDirectTransaction(): UseSendDirectTransactionReturn declare function useTransferToLinkedWallet(): UseTransferToLinkedReturn

Compliance

ERC-3643 transfer check for regulated tokens.

interface UseErc3643ComplianceOptions { tokenAddress: `0x${string}` | undefined to: `0x${string}` | undefined amount: bigint | undefined enabled?: boolean chainId?: number } interface UseErc3643ComplianceResult { canTransfer: boolean | undefined isLoading: boolean error: string | null refetch: () => void } declare function useErc3643Compliance(options: UseErc3643ComplianceOptions): UseErc3643ComplianceResult

Nickname

Human-readable address resolution with fingerprint verification.

interface NicknameResolvedTarget { chainId: number wallet: `0x${string}` } interface NicknameResolution { handle: string requestedChainId: number resolvedTarget: NicknameResolvedTarget | null availableTargets: NicknameResolvedTarget[] owner: `0x${string}` | null fingerprint: string | null avatar: { type: 'deterministic-circles'; seed: string } | null avatarSvg: string | null isFrozen: boolean } interface FingerprintVerificationResult { isValid: boolean computedFingerprint: string | null receivedFingerprint: string | null error?: string } interface UseNicknameResolveOptions { enabled?: boolean chainId: number } interface UseNicknameResolveResult { data: NicknameResolution | undefined isLoading: boolean isResolving: boolean isError: boolean isNotFound: boolean isWalletNotSetup: boolean isFrozen: boolean isFingerprintVerified: boolean fingerprintVerification: FingerprintVerificationResult | null error: Error | null resolvedAddress: string | null } declare function useNicknameResolve(input: string, options: UseNicknameResolveOptions): UseNicknameResolveResult declare function looksLikeNickname(input: string): boolean declare function generateFingerprint(ownerAddress: string): string declare function verifyFingerprint(ownerAddress: string, receivedFingerprint: string): boolean declare function verifyFingerprintDetailed(ownerAddress: string | null, receivedFingerprint: string | null): FingerprintVerificationResult

Account Operations

Imperative functions for smart account management and signing. Each takes the AccountSession from useAccountSession().

import type { AccountSession, BatchOperation, TypedDataDomain, TypedDataField } from '@embarkai/ui-kit' import type { UserOperationV07 } from '@embarkai/core' type FeeType = 'economy' | 'standard' | 'fast' interface PrepareUserOperationParams { to: `0x${string}` value: string data?: `0x${string}` feeType?: FeeType chainId?: number } interface PrepareBatchUserOperationParams { operations: BatchOperation[] feeType?: FeeType chainId?: number } interface SignTypedDataParams { domain: TypedDataDomain types: Record<string, TypedDataField[]> primaryType: string message: Record<string, any> chainId?: number } interface SmartAccountEntry { chainId: number address: string factoryAddress?: string registeredAt: string } declare function prepareUserOperation( session: AccountSession, params: PrepareUserOperationParams, ): Promise<{ userOp: UserOperationV07; userOpHash: `0x${string}` }> declare function sendUserOperation(session: AccountSession, params: PrepareUserOperationParams): Promise<`0x${string}`> declare function prepareBatchUserOperation( session: AccountSession, params: PrepareBatchUserOperationParams, ): Promise<{ userOp: UserOperationV07; userOpHash: `0x${string}` }> declare function sendBatchUserOperation(session: AccountSession, params: PrepareBatchUserOperationParams): Promise<`0x${string}`> declare function signTypedData(session: AccountSession, params: SignTypedDataParams): Promise<`0x${string}`> declare function deployAccount( session: AccountSession, feeType?: FeeType, options?: { force?: boolean; chainId?: number }, ): Promise<`0x${string}` | null> declare function getAllSmartAccounts(): Promise<SmartAccountEntry[]> declare function getSmartAccountForChain(chainId: number): Promise<SmartAccountEntry | null>
interface TypedDataDomain { name?: string version?: string chainId?: number verifyingContract?: `0x${string}` salt?: `0x${string}` } interface TypedDataField { name: string type: string }

Receipt

Utilities for polling and waiting on UserOperation results.

import type { Hash } from 'viem' interface WaitForReceiptOptions { pollIntervalMs?: number maxPollTimeMs?: number chainId?: number } interface UserOperationReceipt { userOpHash: Hash entryPoint: `0x${string}` sender: `0x${string}` nonce: `0x${string}` success: boolean actualGasCost: `0x${string}` actualGasUsed: `0x${string}` paymaster?: `0x${string}` receipt: { transactionHash: Hash; blockNumber: `0x${string}`; blockHash: Hash; [key: string]: any } logs?: any[] reason?: string } interface UserOperationByHash { entryPoint: `0x${string}` userOperation: Record<string, `0x${string}` | undefined> transactionHash: `0x${string}` | null blockNumber: `0x${string}` | null blockHash: `0x${string}` | null } declare function getUserOperationByHash(userOpHash: Hash | string, chainId?: number): Promise<UserOperationByHash | null> declare function getUserOperationReceipt(userOpHash: Hash | string, chainId?: number): Promise<UserOperationReceipt | null> declare function waitForUserOperationReceipt(userOpHash: Hash, options?: WaitForReceiptOptions): Promise<UserOperationReceipt> declare class UserOperationTimeoutError extends Error { userOpHash: Hash chainId: number timeoutMs: number constructor(userOpHash: Hash, chainId: number, timeoutMs: number) }

Auth API

Re-exported from @embarkai/core/auth: logout, jwtTokenManager, getValidTokens, and the types JwtTokens, LoginResponse, VerifyResponse. See the core reference.


Profile

User profile management and linked identity hooks.

import type { FC, SVGProps } from 'react' interface ProviderDetail { id: string provider: string verified: boolean linkedAt: string lastUsedAt: string externalId: string meta?: Record<string, any> } interface UserProfile { userId: string displayName?: string avatar?: string providers: ProviderDetail[] createdAt: string updatedAt: string hasKeyshare: boolean kycDetails: { provider: 'sumsub' | 'uaepass' | 'custom'; kycStatus: string } | null nickname: string | null nicknameDisplay: string | null nicknameCanChange: boolean nicknameCooldownEndsAt: string | null } interface UpdateProfileRequest { displayName?: string } interface LinkedProfileDisplay { provider: 'passkey' | 'email' | 'telegram' | 'google' | 'discord' | 'twitter' | 'wallet' verified: boolean linkedAt: string lastUsedAt?: string externalId: string meta?: Record<string, unknown> displayName: string icon?: FC<SVGProps<SVGSVGElement>> color?: string } declare function getUserProfile(): Promise<UserProfile> declare function updateUserProfile(updates: UpdateProfileRequest): Promise<UserProfile> declare function useLinkedProfiles(): { profiles: LinkedProfileDisplay[] avatar: string isLoading: boolean isFetching: boolean error: Error refresh: () => Promise<void> } declare const USER_PROFILE_QUERY_KEY: readonly unknown[]

i18n

Internationalization utilities and translation resources. Built-in locales: en, ru, zh.

type TranslationResources = Record<string, Record<string, unknown>> declare function combineI18NResources(...resourses: TranslationResources[]): TranslationResources declare function getAvailableLanguages(resourses: TranslationResources): string[] declare function getLanguageIcon(languageKey: string): string | null declare const PASSPORT_TRANSLATIONS: { en: { passport: Record<string, unknown> }; zh: { passport: Record<string, unknown> }; ru: { passport: Record<string, unknown> } } declare const LOCAL_STORAGE_I18N_KEY: 'passport-language'

Errors

Standardized error classes for account abstraction failures.

declare class AccountAbstractionError extends Error { readonly code: string constructor(message: string, code: string) } declare class UserRejectedError extends AccountAbstractionError { static readonly CODE: 'USER_REJECTED' constructor(message?: string) } declare class SessionExpiredError extends AccountAbstractionError { static readonly CODE: 'SESSION_EXPIRED' constructor(message?: string) } declare function isSessionExpiredError(error: unknown): boolean declare function createAccountAbstractionError(params: { message: string; code?: string }): Error declare const ErrorCodes: { readonly MPC_SIGNING_ERROR: 'MPC_SIGNING_ERROR' readonly USER_REJECTED: 'USER_REJECTED' readonly SESSION_EXPIRED: 'SESSION_EXPIRED' }

Iframe Manager

Low-level control of the secure MPC iframe used internally by the Provider.

import type { WalletReadyStatus } from '@embarkai/ui-kit' interface IframeManagerConfig { iframeUrl: string projectId: string debug?: boolean onWalletReady?: (status: WalletReadyStatus) => void } declare function getIframeManager(config?: IframeManagerConfig): unknown declare function destroyIframeManager(): void

getIframeManager returns the singleton IframeManager (DKG, signing, backup and trusted-app calls over postMessage). Its surface is internal and not documented here.


Wagmi Config

wagmiConfig is re-exported from @embarkai/core: the wagmi Config instance the Provider uses, for sharing wagmi state with other libraries.

import type { wagmiConfig as coreWagmiConfig } from '@embarkai/core' declare const wagmiConfig: typeof coreWagmiConfig

Other Exports

Also exported without a dedicated section: useAssetUsdtRate, useConnectedApps, useKeyshareRecoveryStats, useNativeWalletSignature, getAssetRate, getExplorerUrl, getInProgressOnrampTransactionsList, getShareRecoveryStats, checkWrapedTokenSymbol, onboarder, ONBOARDING_TOURS, NETWORKS_ICONS, TOKENS_ICONS, WALLET_ICONS. See dist/index.d.ts in the package for their signatures.

Last updated on