@stellar-expert/ui-framework 1.16.8 → 1.17.0

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
+}
+
+
+

package/horizon/horizon-ledger-helpers.js

@@ -1,36 +1,36 @@
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
-
-/**
- * Load ledgers from Horizon
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadLedgers(queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().ledgers(), queryParams)
-    return query.call()
-        .then(r => r.records)
-}
-
-/**
- * Load ledger by its sequence
- * @param {Number} sequence - Sequence of the ledger to fetch
- * @return {Object}
- */
-export function loadLedger(sequence) {
-    return initHorizon().ledgers()
-        .ledger(sequence)
-        .call()
-}
-
-/**
- * Stream ledgers from Horizon
- * @param {String} cursor - Cursor to start from
- * @param {Function} onNewLedger - Callback to invoke when new ledger arrives
- * @return {Function}
- */
-export function streamLedgers(cursor, onNewLedger) {
-    return initHorizon().ledgers()
-        .order('asc')
-        .cursor(cursor || 'now')
-        .stream({onmessage: ledger => onNewLedger(ledger)})
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+
+/**
+ * Load ledgers from Horizon
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadLedgers(queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().ledgers(), queryParams)
+    return query.call()
+        .then(r => r.records)
+}
+
+/**
+ * Load ledger by its sequence
+ * @param {number} sequence - Sequence of the ledger to fetch
+ * @return {Object}
+ */
+export function loadLedger(sequence) {
+    return initHorizon().ledgers()
+        .ledger(sequence)
+        .call()
+}
+
+/**
+ * Stream ledgers from Horizon
+ * @param {string} cursor - Cursor to start from
+ * @param {function} onNewLedger - Callback to invoke when new ledger arrives
+ * @return {function}
+ */
+export function streamLedgers(cursor, onNewLedger) {
+    return initHorizon().ledgers()
+        .order('asc')
+        .cursor(cursor || 'now')
+        .stream({onmessage: ledger => onNewLedger(ledger)})
 }