@stellar-expert/ui-framework 1.16.8 → 1.19.0

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/interaction/accordion.js

@@ -1,36 +1,44 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import cn from 'classnames'
-import './accordion.scss'
-
-/**
- * Group of collapsible panels
- * @param {{key: String, title: String|JSX.Element, content:*}[]} options - Accordion options
- * @param {String} [collapsedSymbol] - Prefix to show for collapsed panels
- * @param {String} [expandedSymbol] - Prefix to show for expanded panel
- */
-export function Accordion({options, collapsedSymbol = '+', expandedSymbol = '-', ...otherProps}) {
-    const [selectedOption, setSelectedOption] = useState()
-    useEffect(() => {
-        const firstOption = options[0]
-        setSelectedOption(firstOption.key || firstOption.title)
-    }, [options])
-    const changeSelected = useCallback(e => setSelectedOption(e.currentTarget.dataset.key), [options])
-    return <div className="accordion" {...otherProps}>
-        {options.map(({key, title, content}) => {
-            const expanded = key ?
-                selectedOption === key :
-                selectedOption === title
-            return <div key={key || title} className={cn('option', {expanded})}>
-                <div className="accordion-header" data-collapsed={collapsedSymbol} data-expanded={expandedSymbol} data-key={key || title}
-                     onClick={changeSelected}>
-                    {title || key}
-                </div>
-                <div className="accordion-collapse">
-                    <div className="accordion-body">
-                        {content}
-                    </div>
-                </div>
-            </div>
-        })}
-    </div>
+import React, {useCallback, useEffect, useState} from 'react'
+import cn from 'classnames'
+import './accordion.scss'
+
+/**
+ * @typedef {Object} AccordionOption
+ * @property {string} [key] - Unique key for the panel (falls back to title)
+ * @property {string|JSX.Element} title - Panel header content
+ * @property {*} content - Panel body content
+ */
+
+/**
+ * Group of collapsible panels where only one panel is expanded at a time
+ * @param {Object} props
+ * @param {AccordionOption[]} props.options - Accordion panel definitions
+ * @param {string} [props.collapsedSymbol='+'] - Prefix shown for collapsed panels
+ * @param {string} [props.expandedSymbol='-'] - Prefix shown for the expanded panel
+ */
+export function Accordion({options, collapsedSymbol = '+', expandedSymbol = '-', ...otherProps}) {
+    const [selectedOption, setSelectedOption] = useState()
+    useEffect(() => {
+        const firstOption = options[0]
+        setSelectedOption(firstOption.key || firstOption.title)
+    }, [options])
+    const changeSelected = useCallback(e => setSelectedOption(e.currentTarget.dataset.key), [options])
+    return <div className="accordion" {...otherProps}>
+        {options.map(({key, title, content}) => {
+            const expanded = key ?
+                selectedOption === key :
+                selectedOption === title
+            return <div key={key || title} className={cn('option', {expanded})}>
+                <div className="accordion-header" data-collapsed={collapsedSymbol} data-expanded={expandedSymbol} data-key={key || title}
+                     onClick={changeSelected}>
+                    {title || key}
+                </div>
+                <div className="accordion-collapse">
+                    <div className="accordion-body">
+                        {content}
+                    </div>
+                </div>
+            </div>
+        })}
+    </div>
 }

package/interaction/autofocus.js

@@ -1,9 +1,13 @@
-export function useAutoFocusRef(inputRef) {
-    if (!inputRef)
-        return
-    setTimeout(() => {
-        if (document.body.contains(inputRef)) {
-            inputRef.focus()
-        }
-    }, 200)
-}
+/**
+ * Auto-focuses the given DOM element after a short delay (ref callback)
+ * @param {HTMLElement} inputRef - DOM element to focus
+ */
+export function useAutoFocusRef(inputRef) {
+    if (!inputRef)
+        return
+    setTimeout(() => {
+        if (document.body.contains(inputRef)) {
+            inputRef.focus()
+        }
+    }, 200)
+}

package/interaction/block-select.js

@@ -1,54 +1,65 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import './block-select.scss'
-
-function select(target) {
-    //handle textarea and inputs
-    if (target.nodeName.match(/^(INPUT|TEXTAREA)$/i)) {
-        target.focus()
-        target.select()
-        return
-    }
-    //handle selection inside text elements
-    const range = document.createRange()
-    range.selectNodeContents(target)
-    const sel = window.getSelection()
-    if (typeof sel.setBaseAndExtent === 'function') {
-        // Safari
-        sel.setBaseAndExtent(target, 0, target, 1)
-    }
-    sel.removeAllRanges()
-    sel.addRange(range)
-}
-
-export const BlockSelect = React.memo(function BlockSelect({as = 'span', children, title, className, wrap, inline, style, ...op}) {
-    const props = {
-        className: cn('block-select', className),
-        onFocus: e => select(e.target),
-        tabIndex: '-1',
-        style,
-        title,
-        ...op
-    }
-    if (wrap) {
-        props.style = {...props.style, whiteSpace: 'normal', overflow: 'visible'}
-    }
-    if (wrap === false) {
-        props.style = {...props.style, whiteSpace: 'nowrap', overflow: 'hidden'}
-    }
-    if (inline) {
-        props.style = {...props.style, display: 'inline'}
-    }
-    return React.createElement(as, props, children)
-})
-
-BlockSelect.propTypes = {
-    children: PropTypes.any.isRequired,
-    title: PropTypes.string,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    wrap: PropTypes.bool,
-    inline: PropTypes.bool,
-    as: PropTypes.string
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './block-select.scss'
+
+function select(target) {
+    //handle textarea and inputs
+    if (target.nodeName.match(/^(INPUT|TEXTAREA)$/i)) {
+        target.focus()
+        target.select()
+        return
+    }
+    //handle selection inside text elements
+    const range = document.createRange()
+    range.selectNodeContents(target)
+    const sel = window.getSelection()
+    if (typeof sel.setBaseAndExtent === 'function') {
+        // Safari
+        sel.setBaseAndExtent(target, 0, target, 1)
+    }
+    sel.removeAllRanges()
+    sel.addRange(range)
+}
+
+/**
+ * Block that selects all its text content on focus/click
+ * @param {Object} props
+ * @param {string} [props.as='span'] - HTML tag to render
+ * @param {*} props.children - Content to display
+ * @param {string} [props.title] - HTML title attribute
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {boolean} [props.wrap] - Enable text wrapping (true) or disable it (false)
+ * @param {boolean} [props.inline] - Force inline display
+ * @param {Object} [props.style] - Inline styles
+ */
+export const BlockSelect = React.memo(function BlockSelect({as = 'span', children, title, className, wrap, inline, style, ...op}) {
+    const props = {
+        className: cn('block-select', className),
+        onFocus: e => select(e.target),
+        tabIndex: '-1',
+        style,
+        title,
+        ...op
+    }
+    if (wrap) {
+        props.style = {...props.style, whiteSpace: 'normal', overflow: 'visible'}
+    }
+    if (wrap === false) {
+        props.style = {...props.style, whiteSpace: 'nowrap', overflow: 'hidden'}
+    }
+    if (inline) {
+        props.style = {...props.style, display: 'inline'}
+    }
+    return React.createElement(as, props, children)
+})
+
+BlockSelect.propTypes = {
+    children: PropTypes.any.isRequired,
+    title: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    wrap: PropTypes.bool,
+    inline: PropTypes.bool,
+    as: PropTypes.string
 }

package/interaction/copy-to-clipboard.js

@@ -1,19 +1,26 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {CopyToClipboard as Copy} from 'react-copy-to-clipboard'
-
-export const CopyToClipboard = React.memo(function CopyToClipboard({text, children, title}) {
-    return <Copy text={text}>
-        {children ? children : <a href="#" className="icon-copy active-icon" title={title}/>}
-    </Copy>
-})
-
-CopyToClipboard.defaultProps = {
-    title: 'Copy to clipboard'
-}
-
-CopyToClipboard.propTypes = {
-    text: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    children: PropTypes.any
+import React from 'react'
+import PropTypes from 'prop-types'
+import {CopyToClipboard as Copy} from 'react-copy-to-clipboard'
+
+/**
+ * Copy-to-clipboard wrapper; shows a default copy icon if no children are provided
+ * @param {Object} props
+ * @param {string} props.text - Text to copy to clipboard
+ * @param {*} [props.children] - Custom trigger element (defaults to a copy icon)
+ * @param {string} [props.title='Copy to clipboard'] - Tooltip text
+ */
+export const CopyToClipboard = React.memo(function CopyToClipboard({text, children, title}) {
+    return <Copy text={text}>
+        {children ? children : <a href="#" className="icon-copy active-icon" title={title}/>}
+    </Copy>
+})
+
+CopyToClipboard.defaultProps = {
+    title: 'Copy to clipboard'
+}
+
+CopyToClipboard.propTypes = {
+    text: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    children: PropTypes.any
 }

package/interaction/inline-progress.js

@@ -1,16 +1,21 @@
-import React, {useEffect, useRef, useState} from 'react'
-import PropTypes from 'prop-types'
-
-export const InlineProgress = React.memo(function InlineProgress({dots = 5}) {
-    const [progress, setProgress] = useState(0),
-        intervalRef = useRef(0)
-    useEffect(() => {
-        intervalRef.current = setInterval(() => setProgress(p => ++p), 500)
-        return () => clearInterval(intervalRef.current)
-    }, [])
-    return <span>{'.'.repeat(progress % (dots + 1))}</span>
-})
-
-InlineProgress.propTypes = {
-    dots: PropTypes.number
+import React, {useEffect, useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * Animated inline progress indicator that cycles through dots
+ * @param {Object} props
+ * @param {number} [props.dots=5] - Maximum number of dots to display
+ */
+export const InlineProgress = React.memo(function InlineProgress({dots = 5}) {
+    const [progress, setProgress] = useState(0),
+        intervalRef = useRef(0)
+    useEffect(() => {
+        intervalRef.current = setInterval(() => setProgress(p => ++p), 500)
+        return () => clearInterval(intervalRef.current)
+    }, [])
+    return <span>{'.'.repeat(progress % (dots + 1))}</span>
+})
+
+InlineProgress.propTypes = {
+    dots: PropTypes.number
 }

package/interaction/qr-code.js

@@ -1,35 +1,35 @@
-import React, {useMemo, useRef} from 'react'
-import {QRCodeCanvas} from 'qrcode.react'
-
-/**
- * QrCode renderer
- * @param {String} value - Value to encode
- * @param {String} [caption] - Additional caption under QR code
- * @param {Number} [size] - Width|height fo the rendered QR code image
- * @param {String} [embeddedImage] - Optional logo to render in the center of QR code
- * @param {Number} [embeddedSize] - Embedded logo size (by default 10% of QR code size)
- * @return {JSX.Element}
- */
-export const QrCode = React.memo(function QrCode({value, caption, size = 320, embeddedImage, embeddedSize}) {
-    const foreground = useMemo(() => getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
-    const containerRef = useRef()
-    return <div className="text-center" ref={containerRef}>
-        <QRCodeCanvas value={value} size={256} level="Q" includeMargin imageSettings={embedImage(embeddedImage, embeddedSize, size)}
-            fgColor={foreground} style={{width: size + 'px', height: size + 'px', display: 'block', margin: 'auto'}}/>
-        {!!caption && <div className="text-small dimmed condensed word-break">{caption}</div>}
-    </div>
-})
-
-function embedImage(src, size, qrSize) {
-    if (!src)
-        return undefined
-    if (!size) {
-        size = qrSize * 0.1
-    }
-    return {
-        src,
-        height: size,
-        width: size,
-        excavate: true
-    }
+import React, {useMemo, useRef} from 'react'
+import {QRCodeCanvas} from 'qrcode.react'
+
+/**
+ * QrCode renderer
+ * @param {string} value - Value to encode
+ * @param {string} [caption] - Additional caption under QR code
+ * @param {number} [size] - Width|height fo the rendered QR code image
+ * @param {string} [embeddedImage] - Optional logo to render in the center of QR code
+ * @param {number} [embeddedSize] - Embedded logo size (by default 10% of QR code size)
+ * @return {JSX.Element}
+ */
+export const QrCode = React.memo(function QrCode({value, caption, size = 320, embeddedImage, embeddedSize}) {
+    const foreground = useMemo(() => getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
+    const containerRef = useRef()
+    return <div className="text-center" ref={containerRef}>
+        <QRCodeCanvas value={value} size={256} level="Q" includeMargin imageSettings={embedImage(embeddedImage, embeddedSize, size)}
+            fgColor={foreground} style={{width: size + 'px', height: size + 'px', display: 'block', margin: 'auto'}}/>
+        {!!caption && <div className="text-small dimmed condensed word-break">{caption}</div>}
+    </div>
+})
+
+function embedImage(src, size, qrSize) {
+    if (!src)
+        return undefined
+    if (!size) {
+        size = qrSize * 0.1
+    }
+    return {
+        src,
+        height: size,
+        width: size,
+        excavate: true
+    }
 }

package/interaction/responsive.js

@@ -1,21 +1,21 @@
-import {useState, useEffect} from 'react'
-import {throttle} from 'throttle-debounce'
-
-/**
- * Measures window client width
- * @return {Number}
- */
-export function useWindowWidth() {
-    const [width, setWidth] = useState(window.innerWidth)
-
-    const onResize = throttle(100, function () {
-        setWidth(window.innerWidth)
-    })
-
-    useEffect(() => {
-        window.addEventListener('resize', onResize)
-        return () => window.removeEventListener('resize', onResize)
-    }, [])
-
-    return width
+import {useState, useEffect} from 'react'
+import {throttle} from 'throttle-debounce'
+
+/**
+ * Measures window client width
+ * @return {number}
+ */
+export function useWindowWidth() {
+    const [width, setWidth] = useState(window.innerWidth)
+
+    const onResize = throttle(100, function () {
+        setWidth(window.innerWidth)
+    })
+
+    useEffect(() => {
+        window.addEventListener('resize', onResize)
+        return () => window.removeEventListener('resize', onResize)
+    }, [])
+
+    return width
 }