@stellar-expert/ui-framework 1.17.0 → 1.19.0

package/README.md

@@ -1011,6 +1011,49 @@ 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`.
+
+```jsx
+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`
@@ -1098,9 +1141,9 @@ Convert a signature hint Buffer to a StrKey mask string.
 
 Format a signature hint for display.
 
-#### `singatureHintMatchesKey(hint, key)`
+#### `signatureHintMatchesKey(hint, key)`
 
-Check if a hint matches a key. Note: function name contains a typo ("singature").
+Check if a hint matches a key.
 
 #### `findKeyBySignatureHint(hint, allKeys)`
 

package/date/date-selector.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react'
+import React, {forwardRef, useCallback, useEffect, useState} from 'react'
 import {debounce} from 'throttle-debounce'
 import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
 
@@ -10,7 +10,7 @@ import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
  * @param {string} [max] - Maximum allowed date
  * @param {*} [ref]
  */
-export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
+export const DateSelector = forwardRef(({value, onChange, min, max, ...otherProps}, ref) => {
     const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
     useEffect(() => {
         if (value) {
@@ -35,7 +35,7 @@ export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
     return <input type="datetime-local" value={date} className="date-selector condensed" step={60} ref={ref}
                   min={min || minSelectableValue} max={max} onChange={e => selectDate(e.target.value)}
                   style={{width: '11em', overflow: 'hidden'}} {...otherProps}/>
-}
+})
 
 /**
  * Trim seconds and milliseconds for basic ISO date format representation

package/filter/editors/account-filter-view.js

@@ -0,0 +1,20 @@
+import React, {useCallback, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {AccountAddress} from '../../account/account-address'
+import {useAutoFocusRef} from '../../interaction/autofocus'
+
+export function AccountEditor({value, setValue}) {
+    const [internalValue, setInternalValue] = useState(value || '')
+    const onChange = useCallback(function (e) {
+        const v = e.target.value.trim()
+        setInternalValue(v)
+        if (StrKey.isValidEd25519PublicKey(v) || StrKey.isValidContract(v)) {
+            setValue(v)
+        }
+    }, [setValue])
+    if (!setValue)
+        return <AccountAddress account={value} link={false}/>
+
+    return <input type="text" value={internalValue} onChange={onChange} ref={useAutoFocusRef}
+                  style={{width: '26em', maxWidth: '56vw'}} className="condensed"/>
+}

package/filter/editors/asset-filter-view.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import {AssetLink} from '../../asset/asset-link'
+import {AssetSelector} from '../../asset/asset-selector'
+
+export function AssetEditor({value, setValue}) {
+    if (!setValue)
+        return <AssetLink asset={value} link={false}/>
+    return <AssetSelector value={value} onChange={setValue} title={value ? undefined : 'Choose asset'} expanded/>
+}

package/filter/editors/timestamp-filter-view.js

@@ -0,0 +1,34 @@
+import React, {useCallback, useState} from 'react'
+import {UtcTimestamp} from '../../date/utc-timestamp'
+import {DateSelector} from '../../date/date-selector'
+import {useAutoFocusRef} from '../../interaction/autofocus'
+
+export function TimestampEditor({value, setValue, edit}) {
+    value = parseInt(value, 10)
+    const [internalValue, setInternalValue] = useState(value || undefined)
+
+    const confirm = useCallback(function () {
+        setInternalValue(internalValue => {
+            if (internalValue) {
+                setValue(internalValue)
+            }
+            return internalValue
+        })
+    }, [setValue])
+
+    const onKeyDown = useCallback(function (e) {
+        if (e.key === 'Enter') {
+            confirm()
+        }
+        if (e.key === 'Escape') {
+            setValue(value)
+        }
+    }, [confirm, setValue, value])
+    if (!setValue)
+        return <UtcTimestamp date={value} className="condensed"/>
+    return <>
+        <DateSelector value={internalValue} onChange={setInternalValue} onKeyDown={onKeyDown} ref={edit ? useAutoFocusRef : null}/>
+        <a href="#" className="icon-ok" onClick={confirm}/>
+        &nbsp;
+    </>
+}

package/filter/editors/type-filter-view.js

@@ -0,0 +1,148 @@
+import React from 'react'
+import {Dropdown} from '../../controls/dropdown'
+
+export function OperationTypeEditor({value, setValue}) {
+    if (!setValue) {
+        const option = typeEditorOptions.find(opt => opt.value === value)
+        return <span>{option ? option.title : 'Unknown operation type'}</span>
+    }
+
+    return <Dropdown title="Choose operation type" expanded onChange={setValue}
+                     options={typeEditorOptions.map(({title, value}) => ({value, title}))}/>
+}
+
+const typeEditorOptions = [
+    {
+        title: 'Group: payments',
+        description: 'Including CreateAccount, AccountMerge, Payment, PathPaymentStrictReceive, PathPaymentStrictSend, CreateClaimableBalance, ClaimClaimableBalance, Clawback, ClawbackClaimableBalance, Inflation operations',
+        value: 'payments'
+    },
+    {
+        title: 'Group: trustlines',
+        description: 'Including ChangeTrust, AllowTrust, SetTrustLineFlags operations',
+        value: 'trustlines'
+    },
+    {
+        title: 'Group: DEX trading',
+        description: 'Including ManageSellOffer, ManageBuyOffer, CreatePassiveSellOffer, LiquidityPoolDeposit, LiquidityPoolWithdraw operations',
+        value: 'dex'
+    },
+    {
+        title: 'Group: account settings',
+        description: 'Including CreateAccount, SetOptions, ChangeTrust, AllowTrust, AccountMerge, Inflation, ManageData, BumpSequence, BeginSponsoringFutureReserves, EndSponsoringFutureReserves, RevokeSponsorship, SetTrustLineFlags operations',
+        value: 'settings'
+    },
+    {
+        title: 'Group: smart contracts',
+        description: 'Including InvokeHostFunction, BumpFootprintExpiration, RestoreFootprint operations',
+        value: 'soroban'
+    },
+    {
+        title: 'CreateAccount',
+        value: '0'
+    },
+    {
+        title: 'Payment',
+        value: '1'
+    },
+    {
+        title: 'PathPaymentStrictReceive',
+        value: '2'
+    },
+    {
+        title: 'ManageSellOffer',
+        value: '3'
+    },
+    {
+        title: 'CreatePassiveSellOffer',
+        value: '4'
+    },
+    {
+        title: 'SetOptions',
+        value: '5'
+    },
+    {
+        title: 'ChangeTrust',
+        value: '6'
+    },
+    {
+        title: 'AllowTrust',
+        value: '7'
+    },
+    {
+        title: 'AccountMerge',
+        value: '8'
+    },
+    {
+        title: 'Inflation',
+        value: '9'
+    },
+    {
+        title: 'ManageData',
+        value: '10'
+    },
+    {
+        title: 'BumpSequence',
+        value: '11'
+    },
+    {
+        title: 'ManageBuyOffer',
+        value: '12'
+    },
+    {
+        title: 'PathPaymentStrictSend',
+        value: '13'
+    },
+    {
+        title: 'CreateClaimableBalance',
+        value: '14'
+    },
+    {
+        title: 'ClaimClaimableBalance',
+        value: '15'
+    },
+    {
+        title: 'BeginSponsoringFutureReserves',
+        value: '16'
+    },
+    {
+        title: 'EndSponsoringFutureReserves',
+        value: '17'
+    },
+    {
+        title: 'RevokeSponsorship',
+        value: '18'
+    },
+    {
+        title: 'Clawback',
+        value: '19'
+    },
+    {
+        title: 'ClawbackClaimableBalance',
+        value: '20'
+    },
+    {
+        title: 'SetTrustLineFlags',
+        value: '21'
+    },
+    {
+        title: 'LiquidityPoolDeposit',
+        value: '22'
+    },
+    {
+        title: 'LiquidityPoolWithdraw',
+        value: '23'
+    },
+    {
+        title: 'InvokeHostFunction',
+        value: '24'
+    },
+    {
+        title: 'BumpFootprintExpiration',
+        value: '25'
+    },
+    {
+        title: 'RestoreFootprint',
+        value: '26'
+    }
+]

package/filter/filter-editors.js

@@ -0,0 +1,102 @@
+import React, {useCallback, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {shortenString} from '@stellar-expert/formatter'
+import {AssetLink} from '../asset/asset-link'
+import {useAutoFocusRef} from '../interaction/autofocus'
+import {OperationTypeEditor} from './editors/type-filter-view'
+import {AssetEditor} from './editors/asset-filter-view'
+import {AccountEditor} from './editors/account-filter-view'
+import {TimestampEditor} from './editors/timestamp-filter-view'
+
+export function TextEditor({value, setValue, mask}) {
+    const [internalValue, setInternalValue] = useState(value || '')
+
+    const onChange = useCallback(function (e) {
+        let v = e.target.value.trim()
+        if (mask instanceof RegExp) {
+            v = v.replace(mask, '')
+        }
+        if (typeof mask === 'function') {
+            v = mask(v)
+        }
+        setInternalValue(v)
+    }, [mask])
+
+    const confirm = useCallback(function () {
+        setInternalValue(internalValue => {
+            setValue(internalValue)
+            return internalValue
+        })
+    }, [setValue])
+
+    const onKeyDown = useCallback(function (e) {
+        if (e.key === 'Enter') {
+            confirm()
+        }
+        if (e.key === 'Escape') {
+            setValue(value)
+        }
+    }, [confirm, setValue, value])
+
+    if (!setValue) {
+        value = value.toString()
+        return <span>{value.length > 20 ? shortenString(value, 12) : value}</span>
+    }
+
+    return <>
+        <input type="text" value={internalValue} ref={useAutoFocusRef} onChange={onChange} onKeyDown={onKeyDown}
+               style={{width: '16em', maxWidth: '50vw'}}/>&nbsp;
+        <a href="#" className="icon-ok" onClick={confirm}/>
+    </>
+}
+
+function OfferIdEditor({value, setValue}) {
+    return <TextEditor value={value} setValue={setValue} mask={/[\D]/g}/>
+}
+
+function LiquidityPoolEditor({value, setValue}) {
+    if (!setValue) {
+        if (/^[a-f0-9]{64}$/.test(value)) { //remap hex format to pool id format
+            try {
+                value = StrKey.encodeLiquidityPool(Buffer.from(value, 'hex'))
+            } catch (_) {
+            }
+        }
+        if (!StrKey.isValidLiquidityPool(value))
+            return <span className="dimmed">(Invalid pool)</span>
+        if (value.startsWith('native'))
+            return <span className="dimmed">(Native pool)</span>
+        return <AssetLink asset={value} link={false}/>
+    }
+    return <TextEditor value={value} setValue={setValue} mask={/[\W]/g}/>
+}
+
+function MemoEditor({value, setValue}) {
+    return <TextEditor value={value} setValue={setValue} mask={v => v.substring(0, 64)}/>
+}
+
+export function TopicEditor({value, setValue}) {
+    if (!setValue)
+        return <code className="word-break">{value}</code>
+    return <TextEditor value={value} setValue={setValue}/>
+}
+
+const editorMapping = {
+    topic: TopicEditor,
+    type: OperationTypeEditor,
+    account: AccountEditor,
+    source: AccountEditor,
+    destination: AccountEditor,
+    asset: AssetEditor,
+    src_asset: AssetEditor,
+    dest_asset: AssetEditor,
+    from: TimestampEditor,
+    to: TimestampEditor,
+    memo: MemoEditor,
+    offer: OfferIdEditor,
+    pool: LiquidityPoolEditor
+}
+
+export function resolveFilterEditor(field) {
+    return editorMapping[field]
+}

package/filter/filter-view.js

@@ -0,0 +1,218 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import {parseQuery} from '@stellar-expert/navigation'
+import deepmerge from 'deepmerge'
+import {Dropdown} from '../controls/dropdown'
+import {resolveFilterEditor} from './filter-editors'
+import './filter.scss'
+
+let fieldDescriptionMapping = {}
+
+function FilterCondition({field, value, setValue, removeFilter, edit}) {
+    const updateValue = useCallback(function (value) {
+        setValue(field, value)
+    }, [field, setValue])
+
+    const removeValue = useCallback(function () {
+        removeFilter(field, value)
+    }, [field, value, removeFilter])
+
+    const childProps = {value, edit}
+    const filter = fieldDescriptionMapping[field]
+    if (edit || filter.multi === false) {
+        childProps.setValue = updateValue
+    }
+
+    const editor = resolveFilterEditor(field)
+    const title = !edit ? '' : (field === 'type' ? '' : filter.title)
+    return <span className="filter-condition condensed" title={edit ? '' : filter.description}>
+        <span className={'icon-' + filter.icon}/>
+        {title} {React.createElement(editor, childProps)}
+        {removeFilter ? <a href="#" className="icon-delete-circle" onClick={removeValue} title="Remove filter"/> : <>&emsp;</>}
+    </span>
+}
+/**
+ * Parses and validates filter parameters from the current URL query string
+ * @return {object}
+ */
+export function parseFiltersFromQuery() {
+    const params = parseQuery()
+    const filters = {}
+    let isEmpty = true
+    for (const [key, value] of Object.entries(params)) {
+        const filterDescriptor = fieldDescriptionMapping[key]
+        if (!filterDescriptor)
+            continue //skip unrelated query parameters
+        filters[key] = value
+        isEmpty = false
+    }
+    return filters
+}
+
+function FiltersGroup({filters, replaceFilter, removeFilter, edit = false}) {
+    if (!filters)
+        return null
+    return <>{Object.entries(filters).map(([field, values]) => {
+        if (!(values instanceof Array)) {
+            return <FilterCondition key={field} field={field} value={values} edit={edit} setValue={replaceFilter}
+                                    removeFilter={removeFilter}/>
+        }
+        if (!values.length)
+            return null
+        return <React.Fragment key={field}>
+            {values.map(value => <FilterCondition key={value} field={field} value={value} edit={edit}
+                                                  setValue={replaceFilter} removeFilter={removeFilter}/>)}
+        </React.Fragment>
+    })}</>
+}
+
+/**
+ * A component for managing search filters
+ * @param {object} [presetFilter] - Initial base filters
+ * @param {object} [fields] - Custom filter field definitions
+ * @param {func} [onChange] - Callback triggered when filters change
+ */
+export function FilterView({presetFilter, fields = {}, onChange}) {
+    fieldDescriptionMapping = fields
+    const [filters, setFilters] = useState(presetFilter || {})
+    const [_, setSerializedFilter] = useState(JSON.stringify(filters))
+
+    const availableFields = []
+    const readyFilters = {}
+    const editFilters = {}
+    let editorMode = false
+    for (const [field, props = {}] of Object.entries(fieldDescriptionMapping)) {
+        const values = filters[field]
+        if (values !== undefined) {
+            if (values instanceof Array) {
+                const newValues = readyFilters[field] = []
+                for (let i = 0; i < values.length; i++) {
+                    const value = values[i]
+                    if (!value) {
+                        editFilters[field] = [value]
+                        editorMode = true
+                    } else if (!presetFilter || !presetFilter[field]?.includes(value)) {
+                        newValues.push(value)
+                    }
+                }
+            } else {
+                if (!values) {
+                    editFilters[field] = values
+                    editorMode = true
+                } else {
+                    readyFilters[field] = values
+                }
+            }
+        }
+        if (props.multi !== false || !values) {
+            availableFields.push({
+                value: field,
+                title: props.description,
+                icon: 'icon-' + props.icon
+            })
+        }
+    }
+
+    const updateExternalFilters = useCallback(function (newFilters) {
+        setSerializedFilter(prev => {
+            const newValue = JSON.stringify(newFilters)
+            if (prev !== newValue) {
+                setTimeout(() => onChange(deepmerge(presetFilter, newFilters)), 100)
+                return newValue
+            }
+            return prev
+        })
+    }, [onChange])
+
+    useEffect(() => {
+        const queryParams = parseFiltersFromQuery()
+        setFilters(queryParams)
+        updateExternalFilters(queryParams)
+    }, [])
+
+
+    const replaceFilter = useCallback((field, value) => setTimeout(() => setFilters(prev => {
+        const newFilters = {...prev}
+        const filter = fieldDescriptionMapping[field] || {}
+        //atomic values
+        if (filter.multi === false) {
+            if (value === null) {
+                delete newFilters[field]
+                updateExternalFilters(newFilters)
+            } else {
+                newFilters[field] = value
+                if (value) {
+                    updateExternalFilters(newFilters)
+                }
+            }
+            return newFilters
+        }
+        //multi-values
+        let values = newFilters[field]
+        if (!values) {
+            values = newFilters[field] = []
+        }
+        if (value !== null) {
+            if (!values.includes(value)) {
+                if (values[values.length - 1] === '') {
+                    values.pop()
+                }
+                values.push(value)
+                if (value) {
+                    updateExternalFilters(newFilters)
+                }
+            }
+        } else {
+            const idx = values.indexOf('')
+            if (idx >= 0) {
+                values.splice(idx, 1)
+                updateExternalFilters(newFilters)
+            }
+        }
+        return newFilters
+    }), 100), [updateExternalFilters])
+
+    const removeFilter = useCallback((field, value) => setFilters(prev => {
+        const newFilters = {...prev}
+        const filter = fieldDescriptionMapping[field] || {}
+        //atomic value
+        if (filter.multi === false) {
+            if (newFilters[field] || newFilters[field] === '') {
+                newFilters[field] = undefined
+                updateExternalFilters(newFilters)
+            }
+            return newFilters
+        }
+        //multi-values
+        const values = newFilters[field]
+        const idx = values.indexOf(value)
+        if (idx >= 0) {
+            values.splice(idx, 1)
+            updateExternalFilters(newFilters)
+        }
+        return newFilters
+    }), [updateExternalFilters])
+
+    const addFilter = useCallback(field => {
+        replaceFilter(field, '')
+    }, [replaceFilter])
+
+    const title = <span className="nowrap"><span className="icon icon-add-circle"/>Add filter</span>
+
+    return <div className="op-filters">
+        <div className="mobile-only micro-space"/>
+        <span className="icon-filter"/>&nbsp;Filters&emsp;
+        <FiltersGroup filters={presetFilter}/>
+        <FiltersGroup filters={readyFilters} replaceFilter={replaceFilter} removeFilter={removeFilter}/>
+        {!editorMode ?
+            <Dropdown title={title} options={availableFields} onChange={addFilter}/> :
+            <div className="micro-space">
+                <FiltersGroup filters={editFilters} replaceFilter={replaceFilter} removeFilter={removeFilter} edit/>
+            </div>}
+        <div className="micro-space"/>
+    </div>
+}
+
+/**
+ * @callback FilterView~OnChange
+ * @param {Object} mergedFilters - The combination of preset filters and newly selected values.
+ */

package/filter/filter.scss

@@ -0,0 +1,57 @@
+.op-filters {
+  .icon-delete-circle {
+    margin-left: 0.1em;
+  }
+}
+
+.op-filter-container {
+  display: flex;
+  justify-content: flex-start;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-contrast-border);
+  border-radius: $border-radius-input;
+  color: var(--color-text);
+  height: 4rem;
+  padding: 0.2rem 1rem;
+  width: 100%;
+
+  &:focus {
+    border-color: var(--color-highlight);
+  }
+}
+
+.filter-condition {
+  display: inline-block;
+  margin-right: 0.4em;
+  cursor: pointer;
+
+  &:before {
+    content: '/';
+    color: var(--color-highlight);
+  }
+
+  .icon-delete-circle {
+    opacity: 0;
+  }
+
+  &:hover .icon-delete-circle {
+    opacity: 1;
+  }
+
+  > input {
+    margin-bottom: 0;
+    height: 3rem;
+    padding: 0 0.4rem;
+
+    + .icon-ok {
+      display: inline-block;
+      visibility: hidden;
+      transition: visibility 0.3s;
+    }
+
+    &:focus + .icon-ok {
+      visibility: visible;
+      margin-left: 0.2em;
+    }
+  }
+}

package/index.d.ts

@@ -1179,6 +1179,36 @@ export const ScValStruct: React.FC<ScValStructProps>;
 /** Set of primitive ScVal type identifiers */
 export const primitiveTypes: Set<string>;
 
+// ============================================================================
+// Filters
+// ============================================================================
+
+export interface FilterFieldDescriptor {
+    /** Icon CSS class suffix (prepended with "icon-") */
+    icon: string;
+    /** Short title displayed in the filter condition */
+    title: string;
+    /** Description shown in the "Add filter" dropdown and as tooltip */
+    description: string;
+    /** Whether multiple values are allowed for this field (default true) */
+    multi?: boolean;
+}
+
+export interface FilterViewProps {
+    /** Initial base filters that are always applied */
+    presetFilter?: Record<string, any>;
+    /** Filter field definitions keyed by field name */
+    fields?: Record<string, FilterFieldDescriptor>;
+    /** Callback triggered when filters change, receives merged preset + user filters */
+    onChange?: (mergedFilters: Record<string, any>) => void;
+}
+
+/** Composable filter panel for managing search filters with URL query sync */
+export function FilterView(props: FilterViewProps): React.ReactElement;
+
+/** Parse and validate filter parameters from the current URL query string */
+export function parseFiltersFromQuery(): Record<string, any>;
+
 // ============================================================================
 // Stellar Utilities
 // ============================================================================
@@ -1208,7 +1238,7 @@ export function signatureHintToMask(hint: Buffer): string;
 export function formatSignatureHint(hint: Buffer): string;
 
 /** Check if a hint matches a specific key (note: function name has a typo) */
-export function singatureHintMatchesKey(hint: Buffer, key: string): boolean;
+export function signatureHintMatchesKey(hint: Buffer, key: string): boolean;
 
 /** Find a key matching a signature hint */
 export function findKeyBySignatureHint(hint: Buffer, allKeys: string[]): string | null;

package/index.js

@@ -1,93 +1,95 @@
-import './index.scss'
-
-window.explorerFrontendOrigin = window.explorerFrontendOrigin || 'https://stellar.expert'
-window.explorerApiOrigin = window.explorerApiOrigin || 'https://api.stellar.expert'
-window.horizonOrigin = window.horizonOrigin || 'https://horizon.stellar.org'
-
-//modules
-export * from './module/dynamic-module'
-//state management and utils
-export * from './state/state-hooks'
-export * from './state/on-screen-hooks'
-export * from './state/stellar-network-hooks'
-export * from './state/screen-orientation-hooks'
-export * from './state/page-visibility-helpers'
-export * from './state/theme'
-export * from './meta/page-meta-tags'
-//explorer API bindings
-export * from './api/explorer-api-hooks'
-export * from './api/explorer-api-paginated-list-hooks'
-export * from './api/explorer-tx-api'
-export * from './api/explorer-batch-info-loader'
-export * from './api/ledger-stream'
-//Horizon API binding and utils
-export * from './stellar/ledger-generic-id'
-export * from './horizon/horizon-client-helpers'
-export * from './horizon/horizon-ledger-helpers'
-export * from './horizon/horizon-transaction-helpers'
-export * from './horizon/horizon-account-helpers'
-export * from './horizon/horizon-orderbook-helpers'
-export * from './horizon/horizon-trades-helper'
-//basic UI controls
-export * from './controls/button'
-export * from './controls/button-group'
-export * from './controls/info-tooltip'
-export * from './controls/tooltip'
-export * from './controls/update-highlighter'
-export * from './controls/tabs'
-export * from './controls/dropdown'
-export * from './controls/code-block'
-export * from './controls/slider'
-export * from './controls/external-link'
-export * from './toast/toast-notifications-block'
-export * from './errors/error-boundary'
-//interaction
-export * from './interaction/autofocus'
-export * from './interaction/block-select'
-export * from './interaction/copy-to-clipboard'
-export * from './interaction/spoiler'
-export * from './interaction/accordion'
-export * from './interaction/theme-selector'
-export * from './interaction/inline-progress'
-export * from './interaction/responsive'
-export * from './interaction/qr-code'
-export * from './interaction/dialog'
-export * from './interaction/system-dialog'
-//date components
-export * from './date/utc-timestamp'
-export * from './date/elapsed-time'
-export * from './date/date-selector'
-//ledger-entries-related components
-export * from './ledger/ledger-entry-link'
-export * from './ledger/ledger-entry-href-formatter'
-export * from './ledger/ledger-info-parser'
-//account-related components
-export * from './account/identicon'
-export * from './account/account-address'
-export * from './account/signer-key'
-export * from './account/available-balance'
-//asset-related components
-export * from './asset/asset-link'
-export * from './asset/asset-issuer'
-export * from './asset/asset-icon'
-export * from './asset/asset-selector'
-export * from './asset/amount'
-export * from './asset/asset-meta-hooks'
-export * from './asset/asset-list-hooks'
-//claimable-balance-related components
-export * from './claimable-balance/claimable-balance-claimants'
-//DEX-related components
-export * from './dex/price-dynamic'
-//directory-related components
-export * from './directory/directory-hooks'
-//transaction/operation/effects components
-export * from './tx/tx-operations-list'
-export * from './tx/parser/tx-details-parser'
-export * from './tx/tx-list-hooks'
-export * from './effect/effect-description'
-//contract-related components
-export * from './contract/contract-api'
-//Stellar-specific utils
-export * from './stellar/key-type'
-export * from './stellar/signature-hint-utils'
-export * from './contract/sc-val'
+import './index.scss'
+
+window.explorerFrontendOrigin = window.explorerFrontendOrigin || 'https://stellar.expert'
+window.explorerApiOrigin = window.explorerApiOrigin || 'https://api.stellar.expert'
+window.horizonOrigin = window.horizonOrigin || 'https://horizon.stellar.org'
+
+//modules
+export * from './module/dynamic-module'
+//state management and utils
+export * from './state/state-hooks'
+export * from './state/on-screen-hooks'
+export * from './state/stellar-network-hooks'
+export * from './state/screen-orientation-hooks'
+export * from './state/page-visibility-helpers'
+export * from './state/theme'
+export * from './meta/page-meta-tags'
+//explorer API bindings
+export * from './api/explorer-api-hooks'
+export * from './api/explorer-api-paginated-list-hooks'
+export * from './api/explorer-tx-api'
+export * from './api/explorer-batch-info-loader'
+export * from './api/ledger-stream'
+//Horizon API binding and utils
+export * from './stellar/ledger-generic-id'
+export * from './horizon/horizon-client-helpers'
+export * from './horizon/horizon-ledger-helpers'
+export * from './horizon/horizon-transaction-helpers'
+export * from './horizon/horizon-account-helpers'
+export * from './horizon/horizon-orderbook-helpers'
+export * from './horizon/horizon-trades-helper'
+//basic UI controls
+export * from './controls/button'
+export * from './controls/button-group'
+export * from './controls/info-tooltip'
+export * from './controls/tooltip'
+export * from './controls/update-highlighter'
+export * from './controls/tabs'
+export * from './controls/dropdown'
+export * from './controls/code-block'
+export * from './controls/slider'
+export * from './controls/external-link'
+export * from './toast/toast-notifications-block'
+export * from './errors/error-boundary'
+//interaction
+export * from './interaction/autofocus'
+export * from './interaction/block-select'
+export * from './interaction/copy-to-clipboard'
+export * from './interaction/spoiler'
+export * from './interaction/accordion'
+export * from './interaction/theme-selector'
+export * from './interaction/inline-progress'
+export * from './interaction/responsive'
+export * from './interaction/qr-code'
+export * from './interaction/dialog'
+export * from './interaction/system-dialog'
+//date components
+export * from './date/utc-timestamp'
+export * from './date/elapsed-time'
+export * from './date/date-selector'
+//ledger-entries-related components
+export * from './ledger/ledger-entry-link'
+export * from './ledger/ledger-entry-href-formatter'
+export * from './ledger/ledger-info-parser'
+//account-related components
+export * from './account/identicon'
+export * from './account/account-address'
+export * from './account/signer-key'
+export * from './account/available-balance'
+//asset-related components
+export * from './asset/asset-link'
+export * from './asset/asset-issuer'
+export * from './asset/asset-icon'
+export * from './asset/asset-selector'
+export * from './asset/amount'
+export * from './asset/asset-meta-hooks'
+export * from './asset/asset-list-hooks'
+//claimable-balance-related components
+export * from './claimable-balance/claimable-balance-claimants'
+//DEX-related components
+export * from './dex/price-dynamic'
+//directory-related components
+export * from './directory/directory-hooks'
+//transaction/operation/effects components
+export * from './tx/tx-operations-list'
+export * from './tx/parser/tx-details-parser'
+export * from './tx/tx-list-hooks'
+export * from './effect/effect-description'
+//contract-related components
+export * from './contract/contract-api'
+//filter component
+export * from './filter/filter-view'
+//Stellar-specific utils
+export * from './stellar/key-type'
+export * from './stellar/signature-hint-utils'
+export * from './contract/sc-val'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",
@@ -15,8 +15,8 @@
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",
   "peerDependencies": {
-    "@stellar/stellar-base": "^14.0.0",
-    "@stellar/stellar-sdk": "^14.0.0",
+    "@stellar/stellar-base": "^15.0.0",
+    "@stellar/stellar-sdk": "^15.0.1",
     "@stellar-expert/asset-descriptor": "^1.5.0",
     "@stellar-expert/claimable-balance-utils": "^1.4.1",
     "@stellar-expert/client-cache": "^1.1.0",
@@ -25,10 +25,11 @@
     "@stellar-expert/navigation": "^1.1.0",
     "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
     "classnames": ">=2",
+    "deepmerge": "^4.3.1",
     "prop-types": ">=15",
     "qrcode.react": "^4.2.0",
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=17 <18.0.0",
+    "react-dom": ">=17 <18.0.0",
     "react-fast-compare": ">=3",
     "throttle-debounce": ">=5.0.0"
   },
@@ -37,5 +38,34 @@
     "history": "^4.10.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-timeago": "^7.2.0"
-  }
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "index.scss",
+    ".npmrc",
+    "account/*",
+    "api/*",
+    "asset/*",
+    "basic-styles/*",
+    "claimable-balance/*",
+    "contract/*",
+    "controls/*",
+    "date/*",
+    "dex/*",
+    "directory/*",
+    "effect/*",
+    "errors/*",
+    "filter/*",
+    "fonts/*",
+    "horizon/*",
+    "interaction/*",
+    "ledger/*",
+    "meta/*",
+    "module/*",
+    "state/*",
+    "stellar/*",
+    "toast/*",
+    "tx/*"
+  ]
 }

package/stellar/signature-hint-utils.js

@@ -28,7 +28,7 @@ export function formatSignatureHint(hint) {
  * @param {string} key - Key to compare
  * @return {boolean}
  */
-export function singatureHintMatchesKey(hint, key) {
+export function signatureHintMatchesKey(hint, key) {
     return signatureHintToMask(hint).substring(47, 52) === key.substring(47, 52)
 }
 
@@ -39,7 +39,7 @@ export function singatureHintMatchesKey(hint, key) {
  * @return {string|null}
  */
 export function findKeyBySignatureHint(hint, allKeys) {
-    return allKeys.find(key => singatureHintMatchesKey(hint, key))
+    return allKeys.find(key => signatureHintMatchesKey(hint, key))
 }
 
 /**
@@ -49,7 +49,7 @@ export function findKeyBySignatureHint(hint, allKeys) {
  * @returns {Signature}
  */
 export function findSignatureByKey(key, allSignatures = []) {
-    return allSignatures.find(sig => singatureHintMatchesKey(sig.hint(), key))
+    return allSignatures.find(sig => signatureHintMatchesKey(sig.hint(), key))
 }
 
 /**

package/CLAUDE.md

@@ -1,35 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-`@stellar-expert/ui-framework` is a shared React UI component library for the StellarExpert Stellar blockchain explorer. It is consumed as an npm package by other StellarExpert applications — it is not a standalone app.
-
-## Development Setup
-
-- **Package manager:** PNPM (configured via `.npmrc` with `auto-install-peers=true`)
-- **Install dependencies:** `pnpm install`
-- **No build step:** Components are raw ES modules consumed directly via imports. There is no bundler, transpiler, or build script in this repo.
-- **No test suite:** No testing framework is configured.
-
-## Architecture
-
-### Module Organization
-
-Each feature domain lives in its own top-level directory (e.g., `account/`, `asset/`, `contract/`, `controls/`). The main entry point `index.js` re-exports everything and also sets global defaults (`window.explorerFrontendOrigin`, `window.explorerApiOrigin`, `window.horizonOrigin`).
-
-### Key Patterns
-
-- **Functional React components** with `React.memo` for optimization and `PropTypes` for runtime type checking (no TypeScript).
-- **Custom state hooks** instead of Redux/MobX — see `state/state-hooks.js` for `useDependantState` (auto-reinits on deep-compared dependency changes), `useForceUpdate`, and `useDeepEffect`.
-- **SCSS styling** with CSS custom properties for theming. Global styles imported via `index.scss`. Theme system supports `day`/`night` modes via `data-theme` attribute on `<html>`. SCSS files are marked as side effects in `package.json`.
-- **API layer** in `api/` uses custom hooks (`useExplorerApi`) with built-in caching, auto-refresh on visibility, and Stellar network awareness via `useStellarNetwork`.
-- **Peer dependencies** are critical — the consuming app must provide React, Stellar SDK, and the `@stellar-expert/*` utility packages listed in `package.json`.
-
-### Global Configuration
-
-The library expects these globals (with defaults set in `index.js`):
-- `window.explorerFrontendOrigin` — StellarExpert frontend URL
-- `window.explorerApiOrigin` — StellarExpert API URL
-- `window.horizonOrigin` — Stellar Horizon API URL