Components

Pre-built UI components for wallet interaction, transaction display, and account management.

embarkAI ships several ready-to-use React components alongside its hooks. All components respect the current theme; most accept a className prop.

Import


import {
  UserOpStatus,
  Hash,
  Address,
  TransactionsList,
  KeyshareBackup,
  ThemeToggle,
  LangToggle,
} from '@embarkai/ui-kit'

ThemeToggle

A button that toggles between light and dark mode. Accepts standard button props (className, style, …); nothing is required.


import { ThemeToggle } from '@embarkai/ui-kit'
 
function Header() {
  return (
    <nav>
      <ThemeToggle />
    </nav>
  )
}

The toggle updates the color mode globally and persists the preference. See Theming for more details.

LangToggle

A dropdown selector for switching between available languages. Accepts standard button props; nothing is required.


import { LangToggle } from '@embarkai/ui-kit'
 
function Footer() {
  return (
    <footer>
      <LangToggle />
    </footer>
  )
}

The selected language is persisted to localStorage. See Internationalization for configuration details.

UserOpStatus

Displays a real-time status indicator for a submitted UserOperation. Internally polls the bundler and updates the UI as the operation moves through its lifecycle.

Props

Prop	Type	Required	Description
`userOpHash`	`string`	Yes	The UserOperation hash to track.
`chainId`	`number`	No	Chain to poll; defaults to the active chain.
`chain`	`{ id: number; blockExplorers?: { default?: { url: string } } }`	No	Chain object used for explorer links.
`pollMs`	`number`	No	Polling interval in ms. Default: `1000`.
`maxPollTimeMs`	`number`	No	Max polling time in ms. Default: `60000`.
`externalState`	`{ receipt?, mempool?, error?, isPolling? }`	No	Render state you already track with `useUserOpStatus` instead of polling internally.
`className`	`string`	No	CSS class for the wrapper element.

The component has no callbacks. For onStateChange / onReceipt / onTxHash use the useUserOpStatus hook.

Usage


import { useSendTransaction, UserOpStatus } from '@embarkai/ui-kit'
 
function SendPanel() {
  const { sendTransaction, userOpHash } = useSendTransaction()
 
  return (
    <div>
      <button
        onClick={() => sendTransaction({ to: '0x742d35Cc6634C0532925a3b844Bc454e4438f44e', value: '0.1' })}
      >
        Send
      </button>
      {userOpHash && <UserOpStatus userOpHash={userOpHash} pollMs={2000} />}
    </div>
  )
}

Hash

Renders a transaction, address or block hash with copy button and explorer link.

Props

Prop	Type	Required	Description
`hash`	`string \| null`	No	The hash to display. Renders `—` when empty.
`kind`	`'tx' \| 'address' \| 'block'`	No	Explorer route to use. Default: `'tx'`.
`chain`	`{ id: number; blockExplorers?: { default?: { url: string } } }`	No	Chain object with the explorer base URL. Without it no explorer link is rendered.
`truncate`	`boolean`	No	Truncate to `0x12345678...abcdef12` format. Default: `true`.
`showCopy`	`boolean`	No	Show the copy button. Default: `true`.
`showExplorer`	`boolean`	No	Show the explorer link (requires `chain`). Default: `true`.
`label`	`string`	No	Text rendered before the hash.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { Hash } from '@embarkai/ui-kit'
 
const lumia = { id: 994873017, blockExplorers: { default: { url: 'https://explorer.lumia.org' } } }
 
function TxLink({ hash }: { hash: `0x${string}` }) {
  return <Hash hash={hash} kind="tx" truncate showCopy showExplorer chain={lumia} />
}

Address

Renders a wallet address with copy button and explorer link.

Props

Prop	Type	Required	Description
`address`	`string \| null`	No	The wallet address to display. Renders `—` when empty.
`chain`	`{ id: number; blockExplorers?: { default?: { url: string } } }`	No	Chain object with the explorer base URL. Without it no explorer link is rendered.
`truncate`	`boolean`	No	Truncate to `0x12345678...abcdef12` format. Default: `true`.
`showCopy`	`boolean`	No	Show the copy button. Default: `true`.
`showExplorer`	`boolean`	No	Show the explorer link (requires `chain`). Default: `true`.
`label`	`string`	No	Text rendered before the address.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { Address } from '@embarkai/ui-kit'
 
function Owner() {
  return (
    <Address
      address="0x742d35Cc6634C0532925a3b844Bc454e4438f44e"
      truncate
      showCopy
      showExplorer
      chain={{ id: 994873017, blockExplorers: { default: { url: 'https://explorer.lumia.org' } } }}
    />
  )
}

TransactionsList

Displays the recent transaction history for an address.

Props

Prop	Type	Required	Description
`address`	`string`	Yes	Address whose transactions to show.
`itemsCount`	`number`	No	Maximum number of transactions to show.

Usage


import { TransactionsList, useAddress } from '@embarkai/ui-kit'
 
function Activity() {
  const address = useAddress()
  return <TransactionsList address={address} itemsCount={10} />
}

KeyshareBackup

Renders a menu interface for managing keyshare backups. Keyshare backups allow users to recover their wallet if they lose access to their device.


import { KeyshareBackup } from '@embarkai/ui-kit'
 
function SecuritySettings() {
  return (
    <div>
      <h2>Backup</h2>
      <KeyshareBackup />
    </div>
  )
}

Next Steps

Theming — customize component appearance
Internationalization — configure language support
useSendTransaction — pair the UserOpStatus component with transaction hooks