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 and can be styled with the 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. Requires no props.


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. Requires no props.


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.
`pollMs`	`number`	No	Polling interval in ms. Default: `1000`.
`maxPollTimeMs`	`number`	No	Max polling time in ms. Default: `60000`.
`onStateChange`	`(state: UserOpState) => void`	No	Callback on state transitions.
`onReceipt`	`(receipt) => void`	No	Callback when included on-chain.
`onTxHash`	`(txHash: string) => void`	No	Callback when tx hash is available.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { useSendTransaction, UserOpStatus } from '@embarkai/ui-kit'
 
function SendPanel() {
  const { sendTransaction, userOpHash } = useSendTransaction()
 
  return (
    <div>
      <button onClick={() => sendTransaction({ to: '0x...', value: '0.1' })}>
        Send
      </button>
      {userOpHash && (
        <UserOpStatus
          userOpHash={userOpHash}
          onStateChange={(state) => console.log(state)}
        />
      )}
    </div>
  )
}

Hash

Renders a transaction or UserOperation hash with optional truncation and explorer link.

Props

Prop	Type	Required	Description
`hash`	`string`	Yes	The hash to display.
`truncate`	`boolean`	No	Truncate the hash to `0x1234...abcd` format. Default: `true`.
`explorer`	`string`	No	Base URL for the block explorer. Renders the hash as a link.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { Hash } from '@embarkai/ui-kit'
 
<Hash
  hash="0xabc123def456..."
  truncate
  explorer="https://explorer.lumia.org/tx"
/>

Address

Renders a wallet address with optional truncation and explorer link.

Props

Prop	Type	Required	Description
`address`	`string`	Yes	The wallet address to display.
`truncate`	`boolean`	No	Truncate to `0x1234...abcd` format. Default: `true`.
`explorer`	`string`	No	Base URL for the block explorer. Renders the address as a link.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { Address } from '@embarkai/ui-kit'
 
<Address
  address="0x1234567890abcdef1234567890abcdef12345678"
  explorer="https://explorer.lumia.org/address"
/>

TransactionsList

Displays the recent transaction history for the connected wallet.

Props

Prop	Type	Required	Description
`limit`	`number`	No	Maximum number of transactions to show.
`className`	`string`	No	CSS class for the wrapper element.

Usage


import { TransactionsList } from '@embarkai/ui-kit'
 
function Activity() {
  return <TransactionsList limit={10} className="my-tx-list" />
}

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