@stellar-expert/ui-framework

Shared UI components library for StellarExpert apps.

Installation

pnpm add @stellar-expert/ui-framework

Peer dependencies must be installed separately — see peerDependencies in package.json.

Quick Start

import {
    setStellarNetwork,
    createToastNotificationsContainer,
    initMeta
} from '@stellar-expert/ui-framework'

// Set the active Stellar network
setStellarNetwork('public')

// Initialize page meta tags
initMeta({
    serviceTitle: '| StellarExpert',
    origin: 'https://stellar.expert',
    description: 'Stellar blockchain explorer',
    image: 'https://stellar.expert/img/og-image.png'
})

// Initialize toast notifications (call once at app startup)
createToastNotificationsContainer()

Configuration

Global variables:

Global	Default	Description
`window.explorerFrontendOrigin`	`https://stellar.expert`	StellarExpert frontend URL
`window.explorerApiOrigin`	`https://api.stellar.expert`	StellarExpert API URL
`window.horizonOrigin`	`https://horizon.stellar.org`	Stellar Horizon API URL

Override them before importing components if needed.

API Reference

Modules

`DynamicModule`

Dynamically loadable module with error boundary wrapping and caching.

Prop	Type	Required	Description
`load`	`() => Promise`	Yes	Dynamic import function
`module`	`string`	No	Unique module name for caching

import {DynamicModule} from '@stellar-expert/ui-framework'

<DynamicModule module="docs" load={() => import('./docs/docs-view')}/>

State Management

`useDependantState(stateInitializer, dependencies, finalizer?)`

React hook that auto-reinitializes state when dependencies change using deep comparison.

Param	Type	Description
`stateInitializer`	`function\|any`	Initial state or initializer function receiving `(dependencies, prevState)`
`dependencies`	`any[]`	Dependencies array (deep compared)
`finalizer`	`function`	Optional cleanup function

Returns [state, setState] — setState also uses deep comparison.

import {useDependantState} from '@stellar-expert/ui-framework'

const [transfer] = useDependantState(
    () => new TransferSettings(network),
    [network, accountLedgerData.address]
)

const [result, setResult] = useDependantState(() => {
    loadIssuedAssets(address)
        .then(data => setResult({loaded: true, data}))
    return {loaded: false, data: []}
}, [address])

`useForceUpdate()`

Returns a function that forces a component re-render.

const forceUpdate = useForceUpdate()

`useDeepEffect(effect, dependencies)`

Like useEffect but uses deep comparison for dependencies.

import {useDeepEffect} from '@stellar-expert/ui-framework'

useDeepEffect(() => {
    // runs when options deeply change
}, [options, modules, type])

`useOnScreen(root, rootMargin?)`

Hook for determining element visibility using IntersectionObserver.

Param	Type	Description
`root`	`RefObject<Element>`	Scroll parent ref
`rootMargin`	`string`	Visibility margin (e.g., `"100px"`)

Returns boolean.

`getCurrentStellarNetwork()`

Returns the current Stellar network ('public' or 'testnet').

`setStellarNetwork(network)`

Sets the active Stellar network and notifies all subscribers.

import {setStellarNetwork} from '@stellar-expert/ui-framework'

setStellarNetwork('testnet')

`subscribeToStellarNetworkChange(onChange)`

Subscribes to network change events.

import {subscribeToStellarNetworkChange} from '@stellar-expert/ui-framework'

subscribeToStellarNetworkChange(network => {
    window.horizonOrigin = appSettings.horizonUrl
})

`useStellarNetwork()`

React hook that returns the current network and re-renders on change.

const network = useStellarNetwork()

`useScreenOrientation()`

Returns the current screen orientation type (e.g., "portrait-primary").

`isDocumentVisibilitySupported`

Boolean indicating Page Visibility API support.

`isDocumentVisible()`

Returns true if the document tab is currently visible.

`addVisibilityChangeListener(listener)`

Registers a visibility change listener. Returns an unsubscribe function.

`useTheme()`

Returns [theme, setTheme] for managing 'day'/'night' theme.

Meta Tags

`initMeta(appMetaProps)`

Initialize default page meta properties. Call once at app startup.

Param	Type	Required	Description
`appMetaProps.serviceTitle`	`string`	Yes	Service title suffix
`appMetaProps.description`	`string`	Yes	Default description
`appMetaProps.origin`	`string`	Yes	Site origin URL
`appMetaProps.image`	`string`	No	Default OG image
`appMetaProps.imageEndpoint`	`string`	No	Thumbnail generation endpoint

initMeta({
    serviceTitle: '| StellarExpert',
    origin: metaOrigin,
    description: 'StellarExpert - Stellar blockchain explorer',
    image: metaOrigin + '/img/og-image.png',
    imageEndpoint: metaOrigin + '/thumbnail'
})

`usePageMetadata(meta)`

React hook for setting page title, description, and image.

import {usePageMetadata} from '@stellar-expert/ui-framework'

usePageMetadata({
    title: `Account ${address}`,
    description: `Explore properties of account ${address}`
})

`setPageNoIndex(noIndex)`

Add or remove the robots noindex meta tag.

Explorer API

`ExplorerApiResult`

Class representing an API response.

Property	Type	Description
`data`	`any`	Response data
`error`	`string`	Error message if any
`status`	`number`	HTTP status code
`loaded`	`boolean`	Whether response has been received
`fetchedAt`	`number`	Response timestamp

`useExplorerApi(apiEndpoint, options?)`

React hook for fetching data from the StellarExpert API with caching and auto-refresh.

Option	Type	Default	Description
`refreshInterval`	`number`	—	Auto-refresh interval in seconds
`ttl`	`number`	`60`	Cache TTL in seconds
`processResult`	`function`	—	Transform the response data
`allowStaleDataTransition`	`boolean`	`false`	Show stale data during URL transitions

import {useExplorerApi} from '@stellar-expert/ui-framework'

const {data, loaded, error} = useExplorerApi('account/' + address)

const {data: valueInfo} = useExplorerApi(`account/${address}/value`)

const accountInfo = useExplorerApi('account/' + address, {
    processResult(data) { /* transform */ return data }
})

`fetchData(url, ttl?, processResult?)`

Low-level function to fetch from the Explorer API with caching.

`useExplorerPaginatedApi(apiEndpoint, options?, dependencies?)`

React hook for paginated API data with cursor-based navigation.

Option	Type	Default	Description
`ttl`	`number`	`30`	Cache TTL
`limit`	`number`	`20`	Rows per page
`autoReverseRecordsOrder`	`boolean`	`false`	Reverse order for grid display
`defaultSortOrder`	`'asc'\|'desc'`	`'desc'`	Default sort order
`autoLoadLastPage`	`boolean`	`true`	Load last page if empty
`includeNetwork`	`boolean`	`true`	Prefix endpoint with network
`dataProcessingCallback`	`function`	—	Post-process records
`autoLoad`	`boolean`	`true`	Auto-load on mount
`updateLocation`	`boolean\|function`	`true`	Update browser query string

Returns ExplorerApiListResponse with data, loaded, loading, load(page), reset(), canLoadNextPage, canLoadPrevPage.

import {useExplorerPaginatedApi} from '@stellar-expert/ui-framework'

const assets = useExplorerPaginatedApi(
    {path: 'asset/', query: {sort, search: navigation.query.search}},
    {autoReverseRecordsOrder: true, defaultSortOrder: order, limit: 20}
)

`loadTransaction(txHashOrId)`

Load a single transaction by hash or ID. Returns a Promise.

`loadLedgerTransactions(sequence)`

Load all transactions for a given ledger sequence.

`ExplorerBatchInfoLoader`

Batches multiple individual load requests into single API calls.

const loader = new ExplorerBatchInfoLoader(
    batch => fetchExplorerApi('directory' + stringifyQuery({address: batch})),
    entry => ({key: entry.address, info: entry})
)
const result = await loader.loadEntry(address)

`ledgerStream`

Singleton for subscribing to new ledger notifications via long-polling.

Method	Description
`on(listener)`	Subscribe to new ledgers
`off(listener)`	Unsubscribe
`getLast()`	Fetch most recent ledger
`getLastSequence()`	Fetch most recent ledger sequence

Horizon API

`initHorizon()`

Create a new Horizon.Server instance using window.horizonOrigin.

`loadAllHorizonRecords(query)`

Load all records from a Horizon query using cursor-based pagination.

`applyListQueryParameters(query, params?)`

Apply cursor, order, and limit to a Horizon query builder.

`loadLedgers(queryParams?)`, `loadLedger(sequence)`, `streamLedgers(cursor, onNewLedger)`

Ledger-related Horizon API helpers.

`loadTransactions(queryParams?)`, `streamTransactions(cursor, onNewTx, includeFailed?)`, `submitTransaction(tx)`

Transaction-related Horizon API helpers.

`loadAccount(address)`, `loadIssuedAssets(account, queryParams?)`, `loadAccountOffers(account, queryParams?)`, `loadAccountClaimableBalances(account)`

Account-related Horizon API helpers.

`getAccountLockStatus(account)`

Returns 'unlocked', 'locked', or 'partially locked'.

`getAccountBalance(account, asset?)`

Returns {total, available, asset} for a given balance.

`loadOrderbook(selling, buying, queryParams?)`

Load orderbook from Horizon.

`loadMarketTrades(baseAsset, counterAsset, queryParams?)`, `streamMarketTrades(cursor, baseAsset, counterAsset, onNewTrade)`, `streamTrades(cursor, onNewTrade)`, `loadTradesAggregation(params)`

DEX trades Horizon API helpers.

UI Controls

`Button`

Versatile button rendered as <button> or <a>.

Prop	Type	Default	Description
`href`	`string`	—	Renders as `<a>` tag
`onClick`	`function`	—	Click handler
`block`	`boolean`	`false`	Block-level
`outline`	`boolean`	`false`	Outline style
`clear`	`boolean`	`false`	Text only
`small`	`boolean`	`false`	Small size
`disabled`	`boolean`	`false`	Disabled state
`loading`	`boolean`	`false`	Loading animation
`className`	`string`	—	CSS classes
`children`	`ReactNode`	—	Button content

import {Button} from '@stellar-expert/ui-framework'

<Button block outline href="/signup">Create new account</Button>
<Button block disabled={disabled} loading={inProgress} onClick={proceed}>Submit</Button>

`ButtonGroup`

Groups buttons with consistent spacing.

Prop	Type	Description
`inline`	`boolean`	Render as `<span>`
`children`	`ReactNode`	Nested buttons

`Dropdown`

Customizable dropdown select component.

Prop	Type	Default	Description
`options`	`Array<DropdownOption\|string>`	—	Available options
`value`	`string\|number`	—	Selected value
`onChange`	`function`	—	Change handler
`title`	`any`	—	Display title
`disabled`	`boolean`	`false`	Disabled state
`showToggle`	`boolean`	`true`	Toggle arrow
`solo`	`boolean`	`false`	Centered dialog mode
`maxHeight`	`string`	`'35em'`	Max list height

import {Dropdown} from '@stellar-expert/ui-framework'

<Dropdown options={orderOptions} onChange={setSort} value={sort}/>
<Dropdown options={networks} value={network} onChange={updateNetwork}/>

`Tabs`

Tabbed interface with optional URL query parameter sync.

Prop	Type	Description
`tabs`	`TabDescriptor[]`	Tab definitions (`{name, title, render?, isDefault?}`)
`selectedTab`	`string`	Controlled selected tab
`onChange`	`function`	Tab change handler
`queryParam`	`string`	Query parameter for URL sync
`right`	`boolean`	Right-align tabs

import {Tabs} from '@stellar-expert/ui-framework'

<Tabs right queryParam="type"
      tabs={[
          {name: 'all', title: 'All', isDefault: true},
          {name: 'trade', title: 'Trades'}
      ]}
      selectedTab={type}
      onChange={tabName => setType(tabName)}/>

`Tooltip`

Tooltip with automatic positioning.

Prop	Type	Default	Description
`trigger`	`ReactElement`	—	Element that triggers the tooltip
`desiredPlace`	`'top'\|'bottom'\|'left'\|'right'`	`'top'`	Preferred position
`activation`	`'hover'\|'click'`	`'hover'`	Activation mode
`maxWidth`	`string`	—	Max tooltip width
`children`	`ReactNode`	—	Tooltip content

`InfoTooltip`

Help icon with tooltip and optional "Read more" link.

Prop	Type	Description
`children`	`ReactNode`	Tooltip content
`link`	`string`	"Read more" URL
`icon`	`string`	Icon CSS class

import {InfoTooltip} from '@stellar-expert/ui-framework'

<InfoTooltip link="https://example.com/docs">
    Explanation text shown on hover.
</InfoTooltip>

`CodeBlock`

Syntax-highlighted code block.

Prop	Type	Description
`children`	`string`	Source code
`lang`	`'js'\|'json'\|'html'\|'xml'\|'toml'\|'rust'\|'plain'`	Language

import {CodeBlock} from '@stellar-expert/ui-framework'

<CodeBlock lang="rust">{contractSourceCode}</CodeBlock>

`UpdateHighlighter`

Briefly highlights content with animation when children change.

<UpdateHighlighter>{formatPrice(1 / market.price, 4)}</UpdateHighlighter>

`Slider`

Range input slider with optional category labels.

Prop	Type	Default	Description
`value`	`number`	`min`	Current value
`onChange`	`function`	—	Change handler (throttled)
`min`	`number`	`0`	Minimum
`max`	`number`	`100`	Maximum
`step`	`number`	`1`	Step

`ExternalLink`

Link opening in a new tab with rel="noreferrer noopener".

<ExternalLink href="https://example.com">Read more</ExternalLink>

Interaction

`BlockSelect`

Block that auto-selects all its text content on focus.

Prop	Type	Default	Description
`as`	`string`	`'span'`	HTML tag
`wrap`	`boolean`	—	Enable/disable text wrapping
`inline`	`boolean`	—	Inline display

import {BlockSelect} from '@stellar-expert/ui-framework'

<BlockSelect>{originalAddress}</BlockSelect>
<BlockSelect inline className="condensed">{transaction.sequence}</BlockSelect>

`CopyToClipboard`

Copy-to-clipboard wrapper with default copy icon.

Prop	Type	Description
`text`	`string`	Text to copy
`children`	`ReactNode`	Custom trigger (defaults to copy icon)
`title`	`string`	Tooltip text

import {CopyToClipboard} from '@stellar-expert/ui-framework'

<CopyToClipboard text={publicKey}>
    <a href="#" className="icon-copy active-icon" title="Copy account address"/>
</CopyToClipboard>

`Spoiler`

Expandable/collapsible content toggle.

Prop	Type	Default	Description
`expanded`	`boolean`	`false`	Initial state
`showMore`	`string`	`'Show more'`	Expand label
`showLess`	`string`	`'Show less'`	Collapse label
`onChange`	`function`	—	Toggle callback
`micro`	`boolean`	—	Icon-only mode
`children`	`ReactNode`	—	Hidden content

import {Spoiler} from '@stellar-expert/ui-framework'

<Spoiler expanded={extended}
         onChange={e => setExtended(e.expanded)}
         showMore="Show extended info"
         showLess="Hide extended info"/>

`Accordion`

Collapsible panel group (one panel open at a time).

Prop	Type	Default	Description
`options`	`AccordionOption[]`	—	Panel definitions (`{key, title, content}`)
`collapsedSymbol`	`string`	`'+'`	Collapsed prefix
`expandedSymbol`	`string`	`'-'`	Expanded prefix

import {Accordion} from '@stellar-expert/ui-framework'

<Accordion options={[
    {key: 'overview', title: 'Overview', content: <OverviewPanel/>},
    {key: 'details', title: 'Details', content: <DetailsPanel/>}
]}/>

`ThemeSelector`

Theme toggle button switching between day (light) and night (dark) themes.

<ThemeSelector/>

`InlineProgress`

Animated dots progress indicator.

Prop	Type	Default	Description
`dots`	`number`	`5`	Max dots

`useWindowWidth()`

React hook that tracks window width (throttled).

const width = useWindowWidth()

`QrCode`

QR code renderer with optional embedded logo.

Prop	Type	Default	Description
`value`	`string`	—	Value to encode
`size`	`number`	`320`	QR code size
`caption`	`string`	—	Caption below QR
`embeddedImage`	`string`	—	Logo URL
`embeddedSize`	`number`	10% of size	Logo size

import {QrCode} from '@stellar-expert/ui-framework'

<QrCode value={accountAddress} size={240}
        embeddedImage="/img/logo-square.svg" embeddedSize={36}/>

`Dialog`

Modal dialog overlay.

Prop	Type	Description
`dialogOpen`	`boolean`	Whether dialog is visible
`children`	`ReactNode`	Dialog content

<Dialog dialogOpen={isOpen}><AuthRequestView/></Dialog>

`SystemDialog`

Replaces built-in alert() and confirm() with styled dialog versions.

<SystemDialog/>

`useAutoFocusRef`

Ref callback that auto-focuses an element after a short delay.

const inputRef = useAutoFocusRef()
return <input ref={inputRef} />

Date Components

`UtcTimestamp`

Displays a formatted UTC timestamp.

Prop	Type	Description
`date`	`string\|number\|Date`	Timestamp to format
`dateOnly`	`boolean`	Show date without time

import {UtcTimestamp} from '@stellar-expert/ui-framework'

<UtcTimestamp date={created} dateOnly/>
<UtcTimestamp date={offer.created}/>

`ElapsedTime`

Displays relative time (e.g., "3m ago").

Prop	Type	Description
`ts`	`Date\|string\|number`	Timestamp
`suffix`	`string`	Appended text

import {ElapsedTime} from '@stellar-expert/ui-framework'

<ElapsedTime ts={new Date(tx.createdAt)} suffix=" ago"/>

`DateSelector`

Date/time input selector.

Prop	Type	Description
`value`	`string\|number\|Date`	Current date value
`onChange`	`function`	Returns Unix timestamp or null
`min`	`string`	Min date
`max`	`string`	Max date

`trimIsoDateSeconds(date)`

Trims seconds from an ISO date string. Returns a string like "2024-01-15T10:30".

Ledger Components

`TxLink`, `OpLink`, `LedgerLink`, `OfferLink`, `PoolLink`

Links to StellarExpert ledger entries.

Component	ID Prop	Type
`TxLink`	`tx`	`string`
`OpLink`	`op`	`string`
`LedgerLink`	`sequence`	`number`
`OfferLink`	`offer`	`string`
`PoolLink`	`pool`	`string`

All accept optional network and children props.

import {TxLink, OfferLink} from '@stellar-expert/ui-framework'

<TxLink tx={tx.txHash}>
    <ElapsedTime ts={new Date(tx.createdAt)} suffix=" ago"/>
</TxLink>
<OfferLink offer={offer.id}/>

`formatExplorerLink(type, id, network?)`

Generate an explorer URL for a given entry type and ID.

const url = formatExplorerLink('contract', contract.address + '/versions')

`retrieveLedgerInfo(data)`

Parse raw ledger data (including XDR header) into structured LedgerInfo.

Account Components

`AccountAddress`

Explorer link for Stellar addresses with identicon and directory info.

Prop	Type	Default	Description
`account`	`string`	—	StrKey-encoded address
`chars`	`number\|'all'`	`8`	Visible characters
`name`	`string\|false`	—	Display name override
`link`	`string\|false`	—	Link override
`icon`	`boolean`	`true`	Show identicon
`network`	`string`	—	Network override

import {AccountAddress} from '@stellar-expert/ui-framework'

<AccountAddress account={address} chars={12}/>
<AccountAddress account={address} name={false} network={network} chars={12}/>
<AccountAddress account={address} className="plain" link={false} chars="all"/>

`AccountIdenticon`

Renders an account-specific identicon.

Prop	Type	Description
`address`	`string`	StrKey-encoded address
`size`	`number`	Display size

`drawIdenticon(address, size?)`

Generate an SVG identicon string for a Stellar address.

`SignerKey`

Account signer key display with weight.

Prop	Type	Description
`signer`	`Object`	Signer object (raw XDR or parsed)
`showWeight`	`boolean`	Show weight (default `true`)

`calculateAvailableBalance(account, balance, additionalReserves?, decimals?)`

Calculate available balance for an account trustline, accounting for reserves and liabilities.

Asset Components

`AssetLink`

Explorer link for assets with icon and issuer display.

Prop	Type	Default	Description
`asset`	`string\|AssetDescriptor`	—	Asset descriptor
`link`	`string\|false`	—	Link override
`issuer`	`boolean`	`true`	Show issuer
`icon`	`boolean`	`true`	Show icon

import {AssetLink} from '@stellar-expert/ui-framework'

<AssetLink asset={descriptor}/>
<AssetLink asset={xrf} issuer={false} icon={false}/>

`AssetIssuer`

Inline asset issuer display (domain or shortened address).

`AssetIcon`

Asset icon from metadata or identicon fallback.

`AssetSelector`

Asset search and selection dropdown.

Prop	Type	Description
`onChange`	`function`	Selection callback
`value`	`string`	Selected asset
`predefinedAssets`	`string[]`	Assets shown at top
`restricted`	`boolean`	Limit to predefined list
`title`	`string`	Dropdown title

import {AssetSelector} from '@stellar-expert/ui-framework'

<AssetSelector value={asset}
               onChange={select}
               title="Choose an asset"/>

`Amount`

Formatted token amount with optional asset link.

Prop	Type	Description
`amount`	`string\|number`	Token amount
`asset`	`string\|AssetDescriptor`	Asset descriptor
`decimals`	`number\|'auto'`	Decimal precision
`adjust`	`boolean`	Treat as raw Int64 stroops
`round`	`boolean\|'floor'`	Round the amount
`issuer`	`boolean`	Show issuer
`icon`	`boolean`	Show icon

import {Amount} from '@stellar-expert/ui-framework'

<Amount amount={supply} adjust round/>
<Amount asset={offer.selling} amount={offer.amount} adjust/>
<Amount amount={total} asset={xrf} adjust issuer={false}/>

`useAssetMeta(asset)`

React hook that fetches and caches asset metadata. Returns AssetMeta or null.

`useAssetList(params?)`

React hook for fetching a paginated, searchable asset list. Returns {assets, loadPage, loading}.

DEX Components

`PriceDynamic`

Price change percentage indicator with positive/negative styling.

Prop	Type	Description
`change`	`number`	Pre-calculated percentage
`current`	`number`	Current price
`prev`	`number`	Previous price
`standalone`	`boolean`	Standalone styling
`allowZero`	`boolean`	Show 0%

Transaction & Operations

`TxOperationsList`

Renders a list of transaction operations with optional effects.

Prop	Type	Default	Description
`parsedTx`	`ParsedTxDetails`	—	Parsed transaction
`filter`	`function`	—	Filter operations
`showFees`	`boolean`	`true`	Show fee effects
`compact`	`boolean`	`false`	Compact view
`showEffects`	`boolean`	—	Show effects toggle

import {TxOperationsList} from '@stellar-expert/ui-framework'

<TxOperationsList parsedTx={parsedTx}/>
<TxOperationsList parsedTx={tx} compact showFees={false}/>

`parseTxDetails(params)`

Parse transaction details from raw XDR.

Param	Type	Required	Description
`network`	`string`	Yes	Network passphrase
`txEnvelope`	`string`	Yes	Base64 tx envelope XDR
`result`	`string`	No	Base64 tx result
`meta`	`string`	No	Base64 tx meta
`context`	`TxFiltersContext`	No	Filter context
`createdAt`	`string`	No	Timestamp
`protocol`	`number`	No	Protocol version

import {parseTxDetails} from '@stellar-expert/ui-framework'

const parsedTx = parseTxDetails({
    network: appSettings.networkPassphrase,
    txEnvelope: txResponse.body,
    result: txResponse.result,
    meta: txResponse.meta,
    createdAt: txResponse.ts,
    context: {},
    protocol: txResponse.protocol
})

`useTxHistory(params)`

React hook for paginated transaction history.

const historyModel = useTxHistory({
    filters: {account: [address]},
    order: 'desc',
    rows: 50,
    updateLocation: false
})

`useTxInfo(idOrHash)`

React hook for transaction details by ID or hash.

Filters

`FilterView`

Composable filter panel for managing search filters with URL query parameter sync. Supports multiple filter types including accounts, assets, operation types, timestamps, offers, and liquidity pools.

Prop	Type	Default	Description
`presetFilter`	`object`	—	Initial base filters always applied
`fields`	`object`	`{}`	Filter field definitions keyed by field name
`onChange`	`function`	—	Callback receiving merged preset + user filters

Each entry in fields is a FilterFieldDescriptor:

Property	Type	Default	Description
`icon`	`string`	—	Icon class suffix (prepended with `icon-`)
`title`	`string`	—	Short title in filter condition
`description`	`string`	—	Tooltip / "Add filter" dropdown text
`multi`	`boolean`	`true`	Allow multiple values for this field

Supported field keys: type, account, source, destination, asset, src_asset, dest_asset, from, to, memo, offer, pool, topic.

import {FilterView, parseFiltersFromQuery} from '@stellar-expert/ui-framework'

<FilterView
    presetFilter={{account: [address]}}
    fields={{
        type: {icon: 'hexagon', title: 'Type', description: 'Operation type'},
        asset: {icon: 'asset', title: 'Asset', description: 'Asset involved'},
        from: {icon: 'clock', title: 'From', description: 'Start date', multi: false},
        to: {icon: 'clock', title: 'To', description: 'End date', multi: false}
    }}
    onChange={filters => setActiveFilters(filters)}/>

`parseFiltersFromQuery()`

Parses and validates filter parameters from the current URL query string against registered field definitions. Returns an object with matched filter key-value pairs.

Effects

`EffectDescription`

Renders a human-readable description of a transaction effect.

Prop	Type	Description
`effect`	`Object`	Parsed effect with `type` field
`operation`	`Object`	Parent operation context

Contract / Soroban

`useContractInfo(address)`

React hook for fetching contract information. Returns ExplorerApiResult.

`generateContractSourceLink(hash)`

Generate a URL to download contract WASM source.

`useContractSource(hash)`

React hook for fetching contract WASM binary. Returns ArrayBuffer, null, or undefined (loading).

`ScVal`

Renders Stellar smart contract values in human-readable format.

Prop	Type	Default	Description
`value`	`string\|xdr.ScVal\|Array`	—	ScVal (base64 XDR, parsed, or array)
`indent`	`boolean`	`false`	Block-level indentation

import {ScVal} from '@stellar-expert/ui-framework'

<ScVal value={entry.key} indent/>
<ScVal value={entry.value} indent/>

`parseScValValue(value)`

Parse a base64-encoded XDR ScVal string into an xdr.ScVal object.

`ScValStruct`

Structural wrapper for ScVal elements (handles indentation and separators).

`primitiveTypes`

Set<string> of primitive ScVal type identifiers.

Stellar Utilities

`parseStellarGenericId(id)`

Parse a Stellar generic ID into components. Returns {type, id, ledger, tx, operationOrder}.

const {tx: txid, operationOrder} = parseStellarGenericId(term)

`decodeKeyType(key)`

Decode a Stellar key into its type and components. Returns {address, type, muxedId?, publicKey?, payload?} or null.

`parseMuxedAccount(muxedAddress)`

Parse a multiplexed address. Returns {address, muxedId}.

`encodeMuxedAccount(address, muxedId)`

Encode an address and BigInt ID into a multiplexed address.

`signatureHintToMask(hint)`

Convert a signature hint Buffer to a StrKey mask string.

`formatSignatureHint(hint)`

Format a signature hint for display.

`signatureHintMatchesKey(hint, key)`

Check if a hint matches a key.

`findKeyBySignatureHint(hint, allKeys)`

Find a key matching a signature hint.

`findSignatureByKey(key, allSignatures?)`

Find a transaction signature for a given signer key.

`findKeysBySignatureHint(signature, keys)`

Find all keys matching a signature's hint.

const possibleSigners = findKeysBySignatureHint(signature, potentialSigners)

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 344 Commits
account		account
api		api
asset		asset
basic-styles		basic-styles
claimable-balance		claimable-balance
contract		contract
controls		controls
date		date
dex		dex
directory		directory
effect		effect
errors		errors
filter		filter
fonts		fonts
horizon		horizon
interaction		interaction
ledger		ledger
meta		meta
module		module
state		state
stellar		stellar
toast		toast
tx		tx
.gitignore		.gitignore
.npmrc		.npmrc
LICENSE		LICENSE
README.md		README.md
index.d.ts		index.d.ts
index.js		index.js
index.scss		index.scss
package.json		package.json

Option	Type	Default	Description
`forceRefresh`	`boolean`	`false`	Bypass cache
`extended`	`boolean`	`false`	Extended info

Folders and files

Latest commit

History

Repository files navigation

@stellar-expert/ui-framework

Installation

Quick Start

Configuration

API Reference

Modules

DynamicModule

State Management

useDependantState(stateInitializer, dependencies, finalizer?)

useForceUpdate()

useDeepEffect(effect, dependencies)

useOnScreen(root, rootMargin?)

getCurrentStellarNetwork()

setStellarNetwork(network)

subscribeToStellarNetworkChange(onChange)

useStellarNetwork()

useScreenOrientation()

isDocumentVisibilitySupported

isDocumentVisible()

addVisibilityChangeListener(listener)

useTheme()

Meta Tags

initMeta(appMetaProps)

usePageMetadata(meta)

setPageNoIndex(noIndex)

Explorer API

ExplorerApiResult

useExplorerApi(apiEndpoint, options?)

fetchData(url, ttl?, processResult?)

useExplorerPaginatedApi(apiEndpoint, options?, dependencies?)

loadTransaction(txHashOrId)

loadLedgerTransactions(sequence)

ExplorerBatchInfoLoader

ledgerStream

Horizon API

initHorizon()

loadAllHorizonRecords(query)

applyListQueryParameters(query, params?)

loadLedgers(queryParams?), loadLedger(sequence), streamLedgers(cursor, onNewLedger)

loadTransactions(queryParams?), streamTransactions(cursor, onNewTx, includeFailed?), submitTransaction(tx)

loadAccount(address), loadIssuedAssets(account, queryParams?), loadAccountOffers(account, queryParams?), loadAccountClaimableBalances(account)

getAccountLockStatus(account)

getAccountBalance(account, asset?)

loadOrderbook(selling, buying, queryParams?)

loadMarketTrades(baseAsset, counterAsset, queryParams?), streamMarketTrades(cursor, baseAsset, counterAsset, onNewTrade), streamTrades(cursor, onNewTrade), loadTradesAggregation(params)