@stellar-expert/ui-framework 1.16.8 → 1.19.0

package/interaction/spoiler.js

@@ -1,40 +1,53 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import './spoiler.scss'
-
-export const Spoiler = React.memo(function Spoiler({expanded, showMore = 'Show more', showLess = 'Show less', onChange, className, micro, style, active, children}) {
-    const [expandedState, setExpandedState] = useState(expanded || false)
-    useEffect(() => {
-        setExpandedState(expanded)
-    }, [expanded])
-
-    const toggle = useCallback(() => {
-        setExpandedState(prevState => {
-            const newState = !prevState
-            setExpandedState(newState)
-            onChange && onChange({expanded: newState})
-        })
-    }, [onChange])
-
-    const text = expandedState ? showLess : showMore
-    return <>
-        <span className={cn('spoiler', className)}>
-            <a href="#" className={!active ? 'dimmed' : undefined} title={micro ? text : undefined} style={style} onClick={toggle}>
-                {!micro && <span className="spoiler-text">{text}</span>}
-                <i className={`icon ${expandedState ? 'icon-less' : 'icon-more'}`}/>
-            </a>
-        </span>
-        {expandedState ? children : null}
-    </>
-})
-
-Spoiler.propTypes = {
-    expanded: PropTypes.bool,
-    micro: PropTypes.bool,
-    onChange: PropTypes.func,
-    showMore: PropTypes.string,
-    showLess: PropTypes.string,
-    active: PropTypes.bool,
-    style: PropTypes.object
+import React, {useCallback, useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './spoiler.scss'
+
+/**
+ * Expandable/collapsible content toggle
+ * @param {Object} props
+ * @param {boolean} [props.expanded] - Whether the content is initially expanded
+ * @param {string} [props.showMore='Show more'] - Label for the expand action
+ * @param {string} [props.showLess='Show less'] - Label for the collapse action
+ * @param {function({expanded: boolean}): void} [props.onChange] - Callback invoked on toggle
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {boolean} [props.micro] - Show only an icon without text label
+ * @param {Object} [props.style] - Inline styles
+ * @param {boolean} [props.active] - Highlight the toggle link
+ * @param {*} [props.children] - Content revealed when expanded
+ */
+export const Spoiler = React.memo(function Spoiler({expanded, showMore = 'Show more', showLess = 'Show less', onChange, className, micro, style, active, children}) {
+    const [expandedState, setExpandedState] = useState(expanded || false)
+    useEffect(() => {
+        setExpandedState(expanded)
+    }, [expanded])
+
+    const toggle = useCallback(() => {
+        setExpandedState(prevState => {
+            const newState = !prevState
+            setExpandedState(newState)
+            onChange && onChange({expanded: newState})
+        })
+    }, [onChange])
+
+    const text = expandedState ? showLess : showMore
+    return <>
+        <span className={cn('spoiler', className)}>
+            <a href="#" className={!active ? 'dimmed' : undefined} title={micro ? text : undefined} style={style} onClick={toggle}>
+                {!micro && <span className="spoiler-text">{text}</span>}
+                <i className={`icon ${expandedState ? 'icon-less' : 'icon-more'}`}/>
+            </a>
+        </span>
+        {expandedState ? children : null}
+    </>
+})
+
+Spoiler.propTypes = {
+    expanded: PropTypes.bool,
+    micro: PropTypes.bool,
+    onChange: PropTypes.func,
+    showMore: PropTypes.string,
+    showLess: PropTypes.string,
+    active: PropTypes.bool,
+    style: PropTypes.object
 }

package/interaction/theme-selector.js

@@ -1,11 +1,14 @@
-import React from 'react'
-import {useTheme} from '../state/theme'
-
-export const ThemeSelector = React.memo(function ThemeSelector() {
-    const [theme, setTheme] = useTheme()
-    return <a href="#" onClick={() => setTheme(current => current === 'day' ? 'night' : 'day')}>
-        {theme === 'day' ?
-            <><i className="icon icon-night"/> Dark theme</> :
-            <><i className="icon icon-day"/> Light theme</>}
-    </a>
+import React from 'react'
+import {useTheme} from '../state/theme'
+
+/**
+ * Theme toggle button that switches between day (light) and night (dark) themes
+ */
+export const ThemeSelector = React.memo(function ThemeSelector() {
+    const [theme, setTheme] = useTheme()
+    return <a href="#" onClick={() => setTheme(current => current === 'day' ? 'night' : 'day')}>
+        {theme === 'day' ?
+            <><i className="icon icon-night"/> Dark theme</> :
+            <><i className="icon icon-day"/> Light theme</>}
+    </a>
 })

package/ledger/ledger-entry-href-formatter.js

@@ -1,27 +1,28 @@
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
-
-/**
- * @param {'account'|'asset'|'ledger'|'tx'|'op'|'offer'|'contract'|'liquidity-pool'|'claimable-balance'} type
- * @param {String|Number} id
- * @param {String} [network]
- * @return {String}
- */
-export function formatExplorerLink(type, id, network = null) {
-    if (typeof window.explorerLinkFormatter === 'function') {
-        const link = window.explorerLinkFormatter(type, id, network)
-        if (link)
-            return link
-    }
-    const segments = [
-        explorerFrontendOrigin !== window.origin ? explorerFrontendOrigin : '',
-        'explorer',
-        network || getCurrentStellarNetwork()
-    ]
-    if (type) {
-        segments.push(type)
-    }
-    if (id) {
-        segments.push(id)
-    }
-    return segments.join('/')
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+
+/**
+ * Build URL path to StellarExpert explorer page for given ledger entry
+ * @param {'account'|'asset'|'ledger'|'tx'|'op'|'offer'|'contract'|'liquidity-pool'|'claimable-balance'} type
+ * @param {string|number} id
+ * @param {string} [network]
+ * @return {string}
+ */
+export function formatExplorerLink(type, id, network = null) {
+    if (typeof window.explorerLinkFormatter === 'function') {
+        const link = window.explorerLinkFormatter(type, id, network)
+        if (link)
+            return link
+    }
+    const segments = [
+        explorerFrontendOrigin !== window.origin ? explorerFrontendOrigin : '',
+        'explorer',
+        network || getCurrentStellarNetwork()
+    ]
+    if (type) {
+        segments.push(type)
+    }
+    if (id) {
+        segments.push(id)
+    }
+    return segments.join('/')
 }

package/ledger/ledger-entry-link.js

@@ -1,59 +1,94 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {formatExplorerLink} from './ledger-entry-href-formatter'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
-
-function LedgerEntryLink({type, id, network, children}) {
-    const globallySetNetwork = useStellarNetwork()
-    return <a href={formatExplorerLink(type, id, network || globallySetNetwork)} target="_blank">{children || id}</a>
-}
-
-export const TxLink = React.memo(function TxLink({tx, network, children}) {
-    return React.createElement(LedgerEntryLink, {type: 'tx', id: tx, network, children})
-})
-
-TxLink.propTypes = {
-    tx: PropTypes.string.isRequired,
-    network: PropTypes.string,
-    children: PropTypes.any
-}
-
-export const OpLink = React.memo(function OpLink({op, network, children}) {
-    return React.createElement(LedgerEntryLink, {type: 'op', id: op, network, children})
-})
-
-OpLink.propTypes = {
-    op: PropTypes.string.isRequired,
-    network: PropTypes.string,
-    children: PropTypes.any
-}
-
-export const LedgerLink = React.memo(function LedgerLink({sequence, network, children}) {
-    return React.createElement(LedgerEntryLink, {type: 'ledger', id: sequence, network, children})
-})
-
-LedgerLink.propTypes = {
-    sequence: PropTypes.number.isRequired,
-    network: PropTypes.string,
-    children: PropTypes.any
-}
-
-export const OfferLink = React.memo(function OfferLink({offer, network, children}) {
-    return React.createElement(LedgerEntryLink, {type: 'offer', id: offer, network, children})
-})
-
-OfferLink.propTypes = {
-    offer: PropTypes.string.isRequired,
-    network: PropTypes.string,
-    children: PropTypes.any
-}
-
-export const PoolLink = React.memo(function PoolLink({pool, network, children}) {
-    return React.createElement(LedgerEntryLink, {type: 'pool', id: pool, network, children})
-})
-
-PoolLink.propTypes = {
-    pool: PropTypes.string.isRequired,
-    network: PropTypes.string,
-    children: PropTypes.any
+import React from 'react'
+import PropTypes from 'prop-types'
+import {formatExplorerLink} from './ledger-entry-href-formatter'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+
+function LedgerEntryLink({type, id, network, children}) {
+    const globallySetNetwork = useStellarNetwork()
+    return <a href={formatExplorerLink(type, id, network || globallySetNetwork)} target="_blank">{children || id}</a>
+}
+
+/**
+ * Link to a transaction on StellarExpert
+ * @param {Object} props
+ * @param {string} props.tx - Transaction hash
+ * @param {string} [props.network] - Stellar network override
+ * @param {*} [props.children] - Custom link content (defaults to the tx hash)
+ */
+export const TxLink = React.memo(function TxLink({tx, network, children}) {
+    return React.createElement(LedgerEntryLink, {type: 'tx', id: tx, network, children})
+})
+
+TxLink.propTypes = {
+    tx: PropTypes.string.isRequired,
+    network: PropTypes.string,
+    children: PropTypes.any
+}
+
+/**
+ * Link to an operation on StellarExpert
+ * @param {Object} props
+ * @param {string} props.op - Operation ID
+ * @param {string} [props.network] - Stellar network override
+ * @param {*} [props.children] - Custom link content
+ */
+export const OpLink = React.memo(function OpLink({op, network, children}) {
+    return React.createElement(LedgerEntryLink, {type: 'op', id: op, network, children})
+})
+
+OpLink.propTypes = {
+    op: PropTypes.string.isRequired,
+    network: PropTypes.string,
+    children: PropTypes.any
+}
+
+/**
+ * Link to a ledger on StellarExpert
+ * @param {Object} props
+ * @param {number} props.sequence - Ledger sequence number
+ * @param {string} [props.network] - Stellar network override
+ * @param {*} [props.children] - Custom link content
+ */
+export const LedgerLink = React.memo(function LedgerLink({sequence, network, children}) {
+    return React.createElement(LedgerEntryLink, {type: 'ledger', id: sequence, network, children})
+})
+
+LedgerLink.propTypes = {
+    sequence: PropTypes.number.isRequired,
+    network: PropTypes.string,
+    children: PropTypes.any
+}
+
+/**
+ * Link to a DEX offer on StellarExpert
+ * @param {Object} props
+ * @param {string} props.offer - Offer ID
+ * @param {string} [props.network] - Stellar network override
+ * @param {*} [props.children] - Custom link content
+ */
+export const OfferLink = React.memo(function OfferLink({offer, network, children}) {
+    return React.createElement(LedgerEntryLink, {type: 'offer', id: offer, network, children})
+})
+
+OfferLink.propTypes = {
+    offer: PropTypes.string.isRequired,
+    network: PropTypes.string,
+    children: PropTypes.any
+}
+
+/**
+ * Link to a liquidity pool on StellarExpert
+ * @param {Object} props
+ * @param {string} props.pool - Pool ID
+ * @param {string} [props.network] - Stellar network override
+ * @param {*} [props.children] - Custom link content
+ */
+export const PoolLink = React.memo(function PoolLink({pool, network, children}) {
+    return React.createElement(LedgerEntryLink, {type: 'pool', id: pool, network, children})
+})
+
+PoolLink.propTypes = {
+    pool: PropTypes.string.isRequired,
+    network: PropTypes.string,
+    children: PropTypes.any
 }

package/ledger/ledger-info-parser.js

@@ -1,18 +1,46 @@
-import {xdr} from '@stellar/stellar-base'
-
-export function retrieveLedgerInfo(data) {
-    const parsed = xdr.LedgerHeader.fromXDR(data.xdr, 'base64')
-    return {
-        sequence: data.sequence,
-        ts: data.ts,
-        protocol: data.protocol,
-        operations: data.successful_operations || 0,
-        failedOperations: data.failed_operations || 0,
-        txSuccess: data.successful_transactions,
-        txFailed: data.failed_transactions,
-        xlm: parsed.totalCoins().toBigInt(),
-        feePool: parsed.feePool().toBigInt(),
-        baseFee: parsed.baseFee(),
-        baseReserve: parsed.baseReserve()
-    }
-}
+import {xdr} from '@stellar/stellar-base'
+
+/**
+ * @typedef {Object} LedgerInfo
+ * @property {number} sequence - Ledger sequence number
+ * @property {number} ts - Ledger close timestamp
+ * @property {number} protocol - Protocol version
+ * @property {number} operations - number of successful operations
+ * @property {number} failedOperations - number of failed operations
+ * @property {number} txSuccess - number of successful transactions
+ * @property {number} txFailed - number of failed transactions
+ * @property {bigint} xlm - Total lumens in circulation
+ * @property {bigint} feePool - Fee pool amount
+ * @property {number} baseFee - Base fee in stroops
+ * @property {number} baseReserve - Base reserve in stroops
+ */
+
+/**
+ * Parse raw ledger data including XDR header into structured ledger info
+ * @param {Object} data - Raw ledger data from the API
+ * @param {string} data.xdr - Base64-encoded XDR ledger header
+ * @param {number} data.sequence - Ledger sequence number
+ * @param {number} data.ts - Ledger close timestamp
+ * @param {number} data.protocol - Protocol version
+ * @param {number} [data.successful_operations] - Successful operation count
+ * @param {number} [data.failed_operations] - Failed operation count
+ * @param {number} [data.successful_transactions] - Successful transaction count
+ * @param {number} [data.failed_transactions] - Failed transaction count
+ * @return {LedgerInfo}
+ */
+export function retrieveLedgerInfo(data) {
+    const parsed = xdr.LedgerHeader.fromXDR(data.xdr, 'base64')
+    return {
+        sequence: data.sequence,
+        ts: data.ts,
+        protocol: data.protocol,
+        operations: data.successful_operations || 0,
+        failedOperations: data.failed_operations || 0,
+        txSuccess: data.successful_transactions,
+        txFailed: data.failed_transactions,
+        xlm: parsed.totalCoins().toBigInt(),
+        feePool: parsed.feePool().toBigInt(),
+        baseFee: parsed.baseFee(),
+        baseReserve: parsed.baseReserve()
+    }
+}