@stellar-expert/ui-framework 1.16.8 → 1.19.0

package/date/date-selector.js

@@ -1,55 +1,57 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {debounce} from 'throttle-debounce'
-import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
-
-/**
- * @param {String} value - Current input value
- * @param {DateSelector~OnChange} onChange - Onchange event handler
- * @param {String} [min] - Minimum allowed date
- * @param {String} [max] - Maximum allowed date
- * @param {*} [ref]
- */
-export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
-    const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
-    useEffect(() => {
-        if (value) {
-            setDate(trimIsoDateSeconds(normalizeDate(value)))
-        } else {
-            setDate('')
-        }
-    }, [value])
-
-    const selectDate = useCallback(debounce(400, function (newDate) {
-        if (value !== newDate) {
-            setDate(newDate)
-            if (onChange) {
-                onChange(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
-            }
-        }
-    }), [onChange, value])
-
-    if (max === undefined) {
-        max = trimIsoDateSeconds(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
-    }
-    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}/>
-}
-
-/**
- * @param {Date|Number} date
- * @return {String}
- */
-export function trimIsoDateSeconds(date) {
-    if (typeof date === 'number') {
-        date = new Date(date)
-    }
-    return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
-}
-
-const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
-
-/**
- * @callback DateSelector~OnChange
- * @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
+import React, {forwardRef, useCallback, useEffect, useState} from 'react'
+import {debounce} from 'throttle-debounce'
+import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
+
+/**
+ * Date-time picker input
+ * @param {string} value - Current input value
+ * @param {DateSelector~OnChange} onChange - Onchange event handler
+ * @param {string} [min] - Minimum allowed date
+ * @param {string} [max] - Maximum allowed date
+ * @param {*} [ref]
+ */
+export const DateSelector = forwardRef(({value, onChange, min, max, ...otherProps}, ref) => {
+    const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
+    useEffect(() => {
+        if (value) {
+            setDate(trimIsoDateSeconds(normalizeDate(value)))
+        } else {
+            setDate('')
+        }
+    }, [value])
+
+    const selectDate = useCallback(debounce(400, function (newDate) {
+        if (value !== newDate) {
+            setDate(newDate)
+            if (onChange) {
+                onChange(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
+            }
+        }
+    }), [onChange, value])
+
+    if (max === undefined) {
+        max = trimIsoDateSeconds(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
+    }
+    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
+ * @param {Date|number} date
+ * @return {string}
+ */
+export function trimIsoDateSeconds(date) {
+    if (typeof date === 'number') {
+        date = new Date(date)
+    }
+    return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
+}
+
+const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
+
+/**
+ * @callback DateSelector~OnChange
+ * @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
  */

package/date/elapsed-time.js

@@ -1,22 +1,29 @@
-import React from 'react'
-import TimeAgo from 'react-timeago'
-
-const timeUnits = {
-    second: 's',
-    minute: 'm',
-    hour: 'h',
-    day: 'd',
-    week: 'w',
-    month: 'mo',
-    year: 'y'
-}
-
-export const ElapsedTime = React.memo(function ElapsedTime({ts, className, suffix}) {
-    const then = Date.parse(ts)
-    return <span className={className}>
-        <TimeAgo date={ts} formatter={(v, unit) => `${v}${timeUnits[unit]}`} now={function () {
-            const now = Date.now()
-            return then > now ? then : now
-        }}/>{suffix}
-    </span>
+import React from 'react'
+import TimeAgo from 'react-timeago'
+
+const timeUnits = {
+    second: 's',
+    minute: 'm',
+    hour: 'h',
+    day: 'd',
+    week: 'w',
+    month: 'mo',
+    year: 'y'
+}
+
+/**
+ * Displays relative elapsed time since a given timestamp (e.g., "3m ago")
+ * @param {Object} props
+ * @param {Date|string|number} props.ts - Timestamp to measure elapsed time from
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {string} [props.suffix] - Text appended after the time (e.g., " ago")
+ */
+export const ElapsedTime = React.memo(function ElapsedTime({ts, className, suffix}) {
+    const then = Date.parse(ts)
+    return <span className={className}>
+        <TimeAgo date={ts} formatter={(v, unit) => `${v}${timeUnits[unit]}`} now={function () {
+            const now = Date.now()
+            return then > now ? then : now
+        }}/>{suffix}
+    </span>
 })

package/dex/price-dynamic.js

@@ -1,45 +1,54 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import {formatPrice} from '@stellar-expert/formatter'
-import './price-dynamic.scss'
-
-export const PriceDynamic = React.memo(function PriceDynamic({change, current, prev, standalone, allowZero}) {
-    if (change === undefined) {
-        if (current === prev || !prev || !current) {
-            change = 0
-        } else {
-            change = 100 * (current - prev) / prev
-        }
-    }
-    if (Math.abs(change) > 10000)
-        return null
-    change = formatPrice(Math.abs(change), 2) + '%'
-    if (change === '0%' && !allowZero)
-        return null
-    let direction
-    if (parseInt(change) > 0) {
-        direction = 'positive'
-    }
-    if (parseInt(change) < 0) {
-        direction = 'negative'
-    }
-    const className = cn('price-change', getChangeDirection(change), {standalone})
-    return <span className={className} aria-label={` (${change})`}>{change}</span>
-})
-
-function getChangeDirection(change) {
-    change = parseInt(change, 10)
-    if (change > 0)
-        return 'positive'
-    if (change < 0)
-        return 'negative'
-}
-
-PriceDynamic.propTypes = {
-    change: PropTypes.number,
-    current: PropTypes.number,
-    prev: PropTypes.number,
-    standalone: PropTypes.bool,
-    allowZero: PropTypes.bool
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {formatPrice} from '@stellar-expert/formatter'
+import './price-dynamic.scss'
+
+/**
+ * Displays a price change percentage with positive/negative styling
+ * @param {Object} props
+ * @param {number} [props.change] - Pre-calculated change percentage; auto-calculated from current/prev if omitted
+ * @param {number} [props.current] - Current price value (used to calculate change)
+ * @param {number} [props.prev] - Previous price value (used to calculate change)
+ * @param {boolean} [props.standalone] - Apply standalone styling
+ * @param {boolean} [props.allowZero] - Show "0%" instead of returning null for zero change
+ */
+export const PriceDynamic = React.memo(function PriceDynamic({change, current, prev, standalone, allowZero}) {
+    if (change === undefined) {
+        if (current === prev || !prev || !current) {
+            change = 0
+        } else {
+            change = 100 * (current - prev) / prev
+        }
+    }
+    if (Math.abs(change) > 10000)
+        return null
+    change = formatPrice(Math.abs(change), 2) + '%'
+    if (change === '0%' && !allowZero)
+        return null
+    let direction
+    if (parseInt(change) > 0) {
+        direction = 'positive'
+    }
+    if (parseInt(change) < 0) {
+        direction = 'negative'
+    }
+    const className = cn('price-change', getChangeDirection(change), {standalone})
+    return <span className={className} aria-label={` (${change})`}>{change}</span>
+})
+
+function getChangeDirection(change) {
+    change = parseInt(change, 10)
+    if (change > 0)
+        return 'positive'
+    if (change < 0)
+        return 'negative'
+}
+
+PriceDynamic.propTypes = {
+    change: PropTypes.number,
+    current: PropTypes.number,
+    prev: PropTypes.number,
+    standalone: PropTypes.bool,
+    allowZero: PropTypes.bool
 }

package/directory/directory-hooks.js

@@ -1,98 +1,110 @@
-import {useEffect, useState} from 'react'
-import {StrKey} from '@stellar/stellar-base'
-import {stringifyQuery} from '@stellar-expert/navigation'
-import {InMemoryClientCache} from '@stellar-expert/client-cache'
-import {fetchExplorerApi} from '../api/explorer-api-call'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
-
-const cache = new InMemoryClientCache({})
-
-function isValidAddress(address) {
-    if (!address)
-        return false
-    if (!StrKey.isValidEd25519PublicKey(address) && !StrKey.isValidContract(address))
-        return false
-    return true
-}
-
-const loader = new ExplorerBatchInfoLoader(batch => {
-    return fetchExplorerApi('directory' + stringifyQuery({address: batch}))
-}, entry => {
-    cache.set(entry.address, entry)
-    return {key: entry.address, info: entry}
-})
-
-export async function getDirectoryEntry(address, options) {
-    const {forceRefresh = false, extended = false} = options || {}
-    //ignore invalid addresses
-    if (!isValidAddress(address))
-        return null
-    if (extended) {
-        return fetchExplorerApi(`directory/${address}` + stringifyQuery({
-            extended: true,
-            s: Math.random().toString(36).substr(2)
-        }))
-            .catch(err => {
-                console.error(err)
-                return null
-            })
-    }
-    //try to load from the shared cache
-    if (forceRefresh) {
-        const cachedEntry = cache.get(address)
-        if (cachedEntry && !cachedEntry.isExpired) return cachedEntry.data
-    }
-    //load from the server
-    return loader.loadEntry(address)
-}
-
-/**
- *
- * @param {String} address
- * @param {{[forceRefresh]: Boolean}} [options]
- * @return {String|null}
- */
-export function useDirectory(address, options) {
-    const {forceRefresh = false} = options || {}
-    const [directoryInfo, setDirectoryInfo] = useState(null)
-    let unloaded = false
-    useEffect(function () {
-        if (!isValidAddress(address))
-            return
-        if (!forceRefresh) {
-            const cachedEntry = cache.get(address)
-            if (cachedEntry && !cachedEntry.isStale) {
-                if (!cachedEntry.isExpired)
-                    return setDirectoryInfo(cachedEntry.data) //everything is up to date - no need to re-fetch
-            }
-        }
-        //load from the server
-        loader.loadEntry(address)
-            .then(di => {
-                if (!unloaded) {
-                    setDirectoryInfo(di)
-                }
-            })
-        return () => {
-            unloaded = true
-        }
-    }, [address, forceRefresh])
-    return directoryInfo
-}
-
-export function useDirectoryTags() {
-    const [tags, setTags] = useState(() => {
-        const cachedEntry = cache.get('tags')
-        if (cachedEntry && !cachedEntry.isExpired) {
-            return cachedEntry.data
-        }
-        fetchExplorerApi('directory/tags')
-            .then(data => {
-                cache.set('tags', data, 10 * 60) //10 minutes
-                setTags(data)
-            })
-            .catch(err => console.error(err))
-        return []
-    })
-    return tags
+import {useEffect, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {stringifyQuery} from '@stellar-expert/navigation'
+import {InMemoryClientCache} from '@stellar-expert/client-cache'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
+
+const cache = new InMemoryClientCache({})
+
+function isValidAddress(address) {
+    if (!address)
+        return false
+    if (!StrKey.isValidEd25519PublicKey(address) && !StrKey.isValidContract(address))
+        return false
+    return true
+}
+
+const loader = new ExplorerBatchInfoLoader(batch => {
+    return fetchExplorerApi('directory' + stringifyQuery({address: batch}))
+}, entry => {
+    cache.set(entry.address, entry)
+    return {key: entry.address, info: entry}
+})
+
+/**
+ * Fetch a directory entry for a Stellar address
+ * @param {string} address - Stellar account or contract address
+ * @param {Object} [options]
+ * @param {boolean} [options.forceRefresh=false] - Bypass cache and fetch fresh data
+ * @param {boolean} [options.extended=false] - Fetch extended directory information
+ * @return {Promise<Object|null>} Directory entry or null if not found
+ */
+export async function getDirectoryEntry(address, options) {
+    const {forceRefresh = false, extended = false} = options || {}
+    //ignore invalid addresses
+    if (!isValidAddress(address))
+        return null
+    if (extended) {
+        return fetchExplorerApi(`directory/${address}` + stringifyQuery({
+            extended: true,
+            s: Math.random().toString(36).substr(2)
+        }))
+            .catch(err => {
+                console.error(err)
+                return null
+            })
+    }
+    //try to load from the shared cache
+    if (forceRefresh) {
+        const cachedEntry = cache.get(address)
+        if (cachedEntry && !cachedEntry.isExpired) return cachedEntry.data
+    }
+    //load from the server
+    return loader.loadEntry(address)
+}
+
+/**
+ *
+ * @param {string} address
+ * @param {{[forceRefresh]: boolean}} [options]
+ * @return {string|null}
+ */
+export function useDirectory(address, options) {
+    const {forceRefresh = false} = options || {}
+    const [directoryInfo, setDirectoryInfo] = useState(null)
+    let unloaded = false
+    useEffect(function () {
+        if (!isValidAddress(address))
+            return
+        if (!forceRefresh) {
+            const cachedEntry = cache.get(address)
+            if (cachedEntry && !cachedEntry.isStale) {
+                if (!cachedEntry.isExpired)
+                    return setDirectoryInfo(cachedEntry.data) //everything is up to date - no need to re-fetch
+            }
+        }
+        //load from the server
+        loader.loadEntry(address)
+            .then(di => {
+                if (!unloaded) {
+                    setDirectoryInfo(di)
+                }
+            })
+        return () => {
+            unloaded = true
+        }
+    }, [address, forceRefresh])
+    return directoryInfo
+}
+
+/**
+ * React hook that fetches and returns all available directory tags
+ * @return {Array<Object>} Array of directory tag objects
+ */
+export function useDirectoryTags() {
+    const [tags, setTags] = useState(() => {
+        const cachedEntry = cache.get('tags')
+        if (cachedEntry && !cachedEntry.isExpired) {
+            return cachedEntry.data
+        }
+        fetchExplorerApi('directory/tags')
+            .then(data => {
+                cache.set('tags', data, 10 * 60) //10 minutes
+                setTags(data)
+            })
+            .catch(err => console.error(err))
+        return []
+    })
+    return tags
 }