@stellar-expert/ui-framework 1.16.7 → 1.17.0

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
 }

package/effect/effect-description.js

@@ -14,10 +14,12 @@ import {AssetLink} from '../asset/asset-link'
 import {Amount} from '../asset/amount'
 
 /**
- * @param {{}} effect
- * @param {{}} operation
+ * Renders a human-readable description of a Stellar transaction effect
+ * @param {Object} props
+ * @param {Object} props.effect - Parsed transaction effect object
+ * @param {string} props.effect.type - Effect type identifier
+ * @param {Object} [props.operation] - Parent operation context
  * @return {JSX.Element}
- * @constructor
  */
 export function EffectDescription({effect, operation}) {
     switch (effect.type) {

package/errors/error-boundary.js

@@ -1,98 +1,111 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {navigation as nav} from '@stellar-expert/navigation'
-import {BlockSelect} from '../interaction/block-select'
-
-export class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {lastError: null, url: null}
-    }
-
-    componentDidCatch(e, errorInfo) {
-        e.componentStack = errorInfo?.componentStack
-        console.error(e)
-        this.setState({lastError: e, url: window.location.href}, () => {
-            const stopListening = nav.history.listen((location) => {
-                if (this.state.url !== window.location.href) {
-                    stopListening()
-                    this.setState({lastError: null, url: null})
-                }
-            })
-        })
-    }
-
-    renderError() {
-        const {errorBoundarySendErrors = true} = this.props
-        return <>
-            {this.renderErrorDetails()}
-            {errorBoundarySendErrors && this.renderSendErrorBlock()}
-        </>
-    }
-
-    renderSendErrorBlock() {
-        const {lastError, url} = this.state
-        const {message, stack, componentStack} = lastError
-        const compiledText = `Error details:
-"${message}" at ${url}
-${stack}
-${componentStack ? 'Components stack: ' + componentStack : ''}
-${navigator.userAgent}`
-        return <div className="space dimmed text-small text-right">
-            If this error persists please{' '}
-            <a href={'mailto:support@stellar.expert?subject=Exception&body=' + encodeURIComponent(compiledText)}
-               target="_blank">contact our support</a>.
-        </div>
-    }
-
-    renderErrorDetails() {
-        const {lastError, url} = this.state
-        const {message, stack, componentStack} = lastError
-        const text = `"${message}" at ${url}`
-        const {errorBoundaryErrorDetails = true} = this.props
-        if (errorBoundaryErrorDetails === false)
-            return null
-        if (errorBoundaryErrorDetails === true) {
-            return <div className="error space text-small" style={{overflow: 'auto', maxWidth: '100%', padding: '1rem 2rem'}}>
-                <BlockSelect as="div">
-                    <div className="micro-space">{text}</div>
-                    <div className="text-tiny">
-                        <pre style={{whiteSpace: 'pre-wrap'}}>{stack}</pre>
-                        <div>{navigator.userAgent}</div>
-                    </div>
-                </BlockSelect>
-            </div>
-        }
-        return <>{errorBoundaryErrorDetails}</>
-    }
-
-    render() {
-        if (!this.state.lastError)
-            return this.props.children
-        const {title = 'Unhandled error occurred', wrapper, ...otherProps} = this.props
-        if (wrapper)
-            return React.createElement(wrapper, {...otherProps}, this.renderError())
-        return <div className="segment blank">
-            <h3 className="color-danger">{title}</h3>
-            <hr className="flare"/>
-            {this.renderError()}
-        </div>
-    }
-
-    static propTypes = {
-        errorBoundaryTitle: PropTypes.string,
-        errorBoundarySendErrors: PropTypes.bool,
-        errorBoundaryErrorDetails: PropTypes.oneOfType([PropTypes.bool, PropTypes.any])
-    }
-}
-
-export function withErrorBoundary(wrapped, {errorBoundaryTitle, errorBoundarySendErrors, errorBoundaryErrorDetails} = {}) {
-    function ErrorBoundaryWrapper(props) {
-        const nested = /*#__PURE__*/React.createElement(wrapped, props)
-        return <ErrorBoundary {...{errorBoundaryTitle, errorBoundarySendErrors, errorBoundaryErrorDetails}}>{nested}</ErrorBoundary>
-    }
-
-    ErrorBoundaryWrapper.displayName = `withErrorBoundary(${wrapped.displayName || wrapped.name})`
-    ErrorBoundaryWrapper.WrappedComponent = wrapped
-    return ErrorBoundaryWrapper
+import React from 'react'
+import PropTypes from 'prop-types'
+import {navigation as nav} from '@stellar-expert/navigation'
+import {BlockSelect} from '../interaction/block-select'
+
+/**
+ * React error boundary that catches rendering errors and displays a fallback UI
+ * @extends React.Component
+ */
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {lastError: null, url: null}
+    }
+
+    componentDidCatch(e, errorInfo) {
+        e.componentStack = errorInfo?.componentStack
+        console.error(e)
+        this.setState({lastError: e, url: window.location.href}, () => {
+            const stopListening = nav.history.listen((location) => {
+                if (this.state.url !== window.location.href) {
+                    stopListening()
+                    this.setState({lastError: null, url: null})
+                }
+            })
+        })
+    }
+
+    renderError() {
+        const {errorBoundarySendErrors = true} = this.props
+        return <>
+            {this.renderErrorDetails()}
+            {errorBoundarySendErrors && this.renderSendErrorBlock()}
+        </>
+    }
+
+    renderSendErrorBlock() {
+        const {lastError, url} = this.state
+        const {message, stack, componentStack} = lastError
+        const compiledText = `Error details:
+"${message}" at ${url}
+${stack}
+${componentStack ? 'Components stack: ' + componentStack : ''}
+${navigator.userAgent}`
+        return <div className="space dimmed text-small text-right">
+            If this error persists please{' '}
+            <a href={'mailto:support@stellar.expert?subject=Exception&body=' + encodeURIComponent(compiledText)}
+               target="_blank">contact our support</a>.
+        </div>
+    }
+
+    renderErrorDetails() {
+        const {lastError, url} = this.state
+        const {message, stack, componentStack} = lastError
+        const text = `"${message}" at ${url}`
+        const {errorBoundaryErrorDetails = true} = this.props
+        if (errorBoundaryErrorDetails === false)
+            return null
+        if (errorBoundaryErrorDetails === true) {
+            return <div className="error space text-small" style={{overflow: 'auto', maxWidth: '100%', padding: '1rem 2rem'}}>
+                <BlockSelect as="div">
+                    <div className="micro-space">{text}</div>
+                    <div className="text-tiny">
+                        <pre style={{whiteSpace: 'pre-wrap'}}>{stack}</pre>
+                        <div>{navigator.userAgent}</div>
+                    </div>
+                </BlockSelect>
+            </div>
+        }
+        return <>{errorBoundaryErrorDetails}</>
+    }
+
+    render() {
+        if (!this.state.lastError)
+            return this.props.children
+        const {title = 'Unhandled error occurred', wrapper, ...otherProps} = this.props
+        if (wrapper)
+            return React.createElement(wrapper, {...otherProps}, this.renderError())
+        return <div className="segment blank">
+            <h3 className="color-danger">{title}</h3>
+            <hr className="flare"/>
+            {this.renderError()}
+        </div>
+    }
+
+    static propTypes = {
+        errorBoundaryTitle: PropTypes.string,
+        errorBoundarySendErrors: PropTypes.bool,
+        errorBoundaryErrorDetails: PropTypes.oneOfType([PropTypes.bool, PropTypes.any])
+    }
+}
+
+/**
+ * Higher-order component that wraps a component with an ErrorBoundary
+ * @param {function} wrapped - React component to wrap
+ * @param {Object} [options]
+ * @param {string} [options.errorBoundaryTitle] - Title displayed in the error UI
+ * @param {boolean} [options.errorBoundarySendErrors] - Show "contact support" link
+ * @param {boolean|*} [options.errorBoundaryErrorDetails] - Show error details (true), hide (false), or provide custom content
+ * @return {function} Wrapped component with error boundary
+ */
+export function withErrorBoundary(wrapped, {errorBoundaryTitle, errorBoundarySendErrors, errorBoundaryErrorDetails} = {}) {
+    function ErrorBoundaryWrapper(props) {
+        const nested = /*#__PURE__*/React.createElement(wrapped, props)
+        return <ErrorBoundary {...{errorBoundaryTitle, errorBoundarySendErrors, errorBoundaryErrorDetails}}>{nested}</ErrorBoundary>
+    }
+
+    ErrorBoundaryWrapper.displayName = `withErrorBoundary(${wrapped.displayName || wrapped.name})`
+    ErrorBoundaryWrapper.WrappedComponent = wrapped
+    return ErrorBoundaryWrapper
 }

package/horizon/horizon-account-helpers.js

@@ -1,104 +1,104 @@
-import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
-
-/**
- * Retrieve account status from Horizon
- * @param {String} accountAddress
- * @returns {Promise<AccountResponse>}
- */
-export function loadAccount(accountAddress) {
-    return initHorizon()
-        .loadAccount(accountAddress)
-}
-
-/**
- * Load assets issued by the account from Horizon
- * @param {String} account - Account address
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadIssuedAssets(account, queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().assets().forIssuer(account).limit(200), queryParams)
-    return query.call()
-        .then(({records}) => {
-            if (records && records.length) {
-                records.sort((a, b) => a.asset_code - b.asset_code)
-            }
-            return records || []
-        })
-}
-
-/**
- * Load offer from Horizon for the particular account
- * @param {String} account - Account address
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadAccountOffers(account, queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().offers().forAccount(account), queryParams)
-    return loadAllHorizonRecords(query)
-        .then(r => r.records)
-}
-
-
-/**
- * Load pending claimable balances for a given account pubkey
- * @param {String} account - Account address
- * @return {Promise<Array<Object>>}
- */
-export function loadAccountClaimableBalances(account) {
-    return initHorizon().claimableBalances()
-        .claimant(account)
-        .limit(100)
-        .call()
-        .then(r => r.records)
-}
-
-/**
- * Detect account lock status based on the signers configuration
- * @param {AccountResponse} account - Account info from Horizon
- * @returns {'unlocked'|'locked'|'partially locked'}
- */
-export function getAccountLockStatus(account) {
-    const {high_threshold, med_threshold, low_threshold} = account.thresholds
-
-    //calculate the sum of all signers weights
-    const totalSignersWeight = account.signers.reduce((res, signer) => res + signer.weight, 0)
-
-    if (totalSignersWeight > 0) {
-        //compare it with med_threshold and high_threshold
-        if (totalSignersWeight >= med_threshold || totalSignersWeight >= high_threshold) {
-            return 'unlocked'
-        } else if (totalSignersWeight >= low_threshold) {
-            return 'partially locked'
-        }
-    }
-    return 'locked'
-}
-
-/**
- * Retrieve balance for a given Horizon account info
- * @param {AccountResponse} account - Account Horizon info
- * @param {{code: String, issuer: String}} asset - Asset or null (for XLM)
- * @returns {{total: Number, available: Number, [asset]: {code: String, issuer: String}}}
- */
-export function getAccountBalance(account, asset = null) {
-    if (!account.balances) return {asset, total: 0, available: 0}
-    const assetBalance = account.balances.find(b => (!asset && b.asset_type === 'native') ||
-            (b.asset_issuer === asset.issuer && b.asset_code === asset.code)),
-        res = {asset, total: 0, available: 0}
-
-    if (assetBalance) {
-        res.total = parseFloat(assetBalance.balance)
-        res.available = res.total - parseFloat(assetBalance.selling_liabilities)
-        if (!asset) { //for XLM we also need to check reserved amount
-            res.available -= (parseInt(account.subentry_count) + 2) * baseReserve
-        }
-    } else if (asset && asset.issuer === account.address) {
-        res.total = res.available = 922337203685
-    }
-
-    return res
-}
-
-
-
+import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
+
+/**
+ * Retrieve account status from Horizon
+ * @param {string} accountAddress
+ * @returns {Promise<AccountResponse>}
+ */
+export function loadAccount(accountAddress) {
+    return initHorizon()
+        .loadAccount(accountAddress)
+}
+
+/**
+ * Load assets issued by the account from Horizon
+ * @param {string} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadIssuedAssets(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().assets().forIssuer(account).limit(200), queryParams)
+    return query.call()
+        .then(({records}) => {
+            if (records && records.length) {
+                records.sort((a, b) => a.asset_code - b.asset_code)
+            }
+            return records || []
+        })
+}
+
+/**
+ * Load offer from Horizon for the particular account
+ * @param {string} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountOffers(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().offers().forAccount(account), queryParams)
+    return loadAllHorizonRecords(query)
+        .then(r => r.records)
+}
+
+
+/**
+ * Load pending claimable balances for a given account pubkey
+ * @param {string} account - Account address
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountClaimableBalances(account) {
+    return initHorizon().claimableBalances()
+        .claimant(account)
+        .limit(100)
+        .call()
+        .then(r => r.records)
+}
+
+/**
+ * Detect account lock status based on the signers configuration
+ * @param {AccountResponse} account - Account info from Horizon
+ * @returns {'unlocked'|'locked'|'partially locked'}
+ */
+export function getAccountLockStatus(account) {
+    const {high_threshold, med_threshold, low_threshold} = account.thresholds
+
+    //calculate the sum of all signers weights
+    const totalSignersWeight = account.signers.reduce((res, signer) => res + signer.weight, 0)
+
+    if (totalSignersWeight > 0) {
+        //compare it with med_threshold and high_threshold
+        if (totalSignersWeight >= med_threshold || totalSignersWeight >= high_threshold) {
+            return 'unlocked'
+        } else if (totalSignersWeight >= low_threshold) {
+            return 'partially locked'
+        }
+    }
+    return 'locked'
+}
+
+/**
+ * Retrieve balance for a given Horizon account info
+ * @param {AccountResponse} account - Account Horizon info
+ * @param {{code: string, issuer: string}} asset - Asset or null (for XLM)
+ * @returns {{total: number, available: number, [asset]: {code: string, issuer: string}}}
+ */
+export function getAccountBalance(account, asset = null) {
+    if (!account.balances) return {asset, total: 0, available: 0}
+    const assetBalance = account.balances.find(b => (!asset && b.asset_type === 'native') ||
+            (b.asset_issuer === asset.issuer && b.asset_code === asset.code)),
+        res = {asset, total: 0, available: 0}
+
+    if (assetBalance) {
+        res.total = parseFloat(assetBalance.balance)
+        res.available = res.total - parseFloat(assetBalance.selling_liabilities)
+        if (!asset) { //for XLM we also need to check reserved amount
+            res.available -= (parseInt(account.subentry_count) + 2) * baseReserve
+        }
+    } else if (asset && asset.issuer === account.address) {
+        res.total = res.available = 922337203685
+    }
+
+    return res
+}
+
+
+