@stellar-expert/ui-framework 1.16.8 → 1.19.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/filter/editors/account-filter-view.js

@@ -0,0 +1,20 @@
+import React, {useCallback, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {AccountAddress} from '../../account/account-address'
+import {useAutoFocusRef} from '../../interaction/autofocus'
+
+export function AccountEditor({value, setValue}) {
+    const [internalValue, setInternalValue] = useState(value || '')
+    const onChange = useCallback(function (e) {
+        const v = e.target.value.trim()
+        setInternalValue(v)
+        if (StrKey.isValidEd25519PublicKey(v) || StrKey.isValidContract(v)) {
+            setValue(v)
+        }
+    }, [setValue])
+    if (!setValue)
+        return <AccountAddress account={value} link={false}/>
+
+    return <input type="text" value={internalValue} onChange={onChange} ref={useAutoFocusRef}
+                  style={{width: '26em', maxWidth: '56vw'}} className="condensed"/>
+}

package/filter/editors/asset-filter-view.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import {AssetLink} from '../../asset/asset-link'
+import {AssetSelector} from '../../asset/asset-selector'
+
+export function AssetEditor({value, setValue}) {
+    if (!setValue)
+        return <AssetLink asset={value} link={false}/>
+    return <AssetSelector value={value} onChange={setValue} title={value ? undefined : 'Choose asset'} expanded/>
+}

package/filter/editors/timestamp-filter-view.js

@@ -0,0 +1,34 @@
+import React, {useCallback, useState} from 'react'
+import {UtcTimestamp} from '../../date/utc-timestamp'
+import {DateSelector} from '../../date/date-selector'
+import {useAutoFocusRef} from '../../interaction/autofocus'
+
+export function TimestampEditor({value, setValue, edit}) {
+    value = parseInt(value, 10)
+    const [internalValue, setInternalValue] = useState(value || undefined)
+
+    const confirm = useCallback(function () {
+        setInternalValue(internalValue => {
+            if (internalValue) {
+                setValue(internalValue)
+            }
+            return internalValue
+        })
+    }, [setValue])
+
+    const onKeyDown = useCallback(function (e) {
+        if (e.key === 'Enter') {
+            confirm()
+        }
+        if (e.key === 'Escape') {
+            setValue(value)
+        }
+    }, [confirm, setValue, value])
+    if (!setValue)
+        return <UtcTimestamp date={value} className="condensed"/>
+    return <>
+        <DateSelector value={internalValue} onChange={setInternalValue} onKeyDown={onKeyDown} ref={edit ? useAutoFocusRef : null}/>
+        <a href="#" className="icon-ok" onClick={confirm}/>
+        &nbsp;
+    </>
+}

package/filter/editors/type-filter-view.js

@@ -0,0 +1,148 @@
+import React from 'react'
+import {Dropdown} from '../../controls/dropdown'
+
+export function OperationTypeEditor({value, setValue}) {
+    if (!setValue) {
+        const option = typeEditorOptions.find(opt => opt.value === value)
+        return <span>{option ? option.title : 'Unknown operation type'}</span>
+    }
+
+    return <Dropdown title="Choose operation type" expanded onChange={setValue}
+                     options={typeEditorOptions.map(({title, value}) => ({value, title}))}/>
+}
+
+const typeEditorOptions = [
+    {
+        title: 'Group: payments',
+        description: 'Including CreateAccount, AccountMerge, Payment, PathPaymentStrictReceive, PathPaymentStrictSend, CreateClaimableBalance, ClaimClaimableBalance, Clawback, ClawbackClaimableBalance, Inflation operations',
+        value: 'payments'
+    },
+    {
+        title: 'Group: trustlines',
+        description: 'Including ChangeTrust, AllowTrust, SetTrustLineFlags operations',
+        value: 'trustlines'
+    },
+    {
+        title: 'Group: DEX trading',
+        description: 'Including ManageSellOffer, ManageBuyOffer, CreatePassiveSellOffer, LiquidityPoolDeposit, LiquidityPoolWithdraw operations',
+        value: 'dex'
+    },
+    {
+        title: 'Group: account settings',
+        description: 'Including CreateAccount, SetOptions, ChangeTrust, AllowTrust, AccountMerge, Inflation, ManageData, BumpSequence, BeginSponsoringFutureReserves, EndSponsoringFutureReserves, RevokeSponsorship, SetTrustLineFlags operations',
+        value: 'settings'
+    },
+    {
+        title: 'Group: smart contracts',
+        description: 'Including InvokeHostFunction, BumpFootprintExpiration, RestoreFootprint operations',
+        value: 'soroban'
+    },
+    {
+        title: 'CreateAccount',
+        value: '0'
+    },
+    {
+        title: 'Payment',
+        value: '1'
+    },
+    {
+        title: 'PathPaymentStrictReceive',
+        value: '2'
+    },
+    {
+        title: 'ManageSellOffer',
+        value: '3'
+    },
+    {
+        title: 'CreatePassiveSellOffer',
+        value: '4'
+    },
+    {
+        title: 'SetOptions',
+        value: '5'
+    },
+    {
+        title: 'ChangeTrust',
+        value: '6'
+    },
+    {
+        title: 'AllowTrust',
+        value: '7'
+    },
+    {
+        title: 'AccountMerge',
+        value: '8'
+    },
+    {
+        title: 'Inflation',
+        value: '9'
+    },
+    {
+        title: 'ManageData',
+        value: '10'
+    },
+    {
+        title: 'BumpSequence',
+        value: '11'
+    },
+    {
+        title: 'ManageBuyOffer',
+        value: '12'
+    },
+    {
+        title: 'PathPaymentStrictSend',
+        value: '13'
+    },
+    {
+        title: 'CreateClaimableBalance',
+        value: '14'
+    },
+    {
+        title: 'ClaimClaimableBalance',
+        value: '15'
+    },
+    {
+        title: 'BeginSponsoringFutureReserves',
+        value: '16'
+    },
+    {
+        title: 'EndSponsoringFutureReserves',
+        value: '17'
+    },
+    {
+        title: 'RevokeSponsorship',
+        value: '18'
+    },
+    {
+        title: 'Clawback',
+        value: '19'
+    },
+    {
+        title: 'ClawbackClaimableBalance',
+        value: '20'
+    },
+    {
+        title: 'SetTrustLineFlags',
+        value: '21'
+    },
+    {
+        title: 'LiquidityPoolDeposit',
+        value: '22'
+    },
+    {
+        title: 'LiquidityPoolWithdraw',
+        value: '23'
+    },
+    {
+        title: 'InvokeHostFunction',
+        value: '24'
+    },
+    {
+        title: 'BumpFootprintExpiration',
+        value: '25'
+    },
+    {
+        title: 'RestoreFootprint',
+        value: '26'
+    }
+]

package/filter/filter-editors.js

@@ -0,0 +1,102 @@
+import React, {useCallback, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {shortenString} from '@stellar-expert/formatter'
+import {AssetLink} from '../asset/asset-link'
+import {useAutoFocusRef} from '../interaction/autofocus'
+import {OperationTypeEditor} from './editors/type-filter-view'
+import {AssetEditor} from './editors/asset-filter-view'
+import {AccountEditor} from './editors/account-filter-view'
+import {TimestampEditor} from './editors/timestamp-filter-view'
+
+export function TextEditor({value, setValue, mask}) {
+    const [internalValue, setInternalValue] = useState(value || '')
+
+    const onChange = useCallback(function (e) {
+        let v = e.target.value.trim()
+        if (mask instanceof RegExp) {
+            v = v.replace(mask, '')
+        }
+        if (typeof mask === 'function') {
+            v = mask(v)
+        }
+        setInternalValue(v)
+    }, [mask])
+
+    const confirm = useCallback(function () {
+        setInternalValue(internalValue => {
+            setValue(internalValue)
+            return internalValue
+        })
+    }, [setValue])
+
+    const onKeyDown = useCallback(function (e) {
+        if (e.key === 'Enter') {
+            confirm()
+        }
+        if (e.key === 'Escape') {
+            setValue(value)
+        }
+    }, [confirm, setValue, value])
+
+    if (!setValue) {
+        value = value.toString()
+        return <span>{value.length > 20 ? shortenString(value, 12) : value}</span>
+    }
+
+    return <>
+        <input type="text" value={internalValue} ref={useAutoFocusRef} onChange={onChange} onKeyDown={onKeyDown}
+               style={{width: '16em', maxWidth: '50vw'}}/>&nbsp;
+        <a href="#" className="icon-ok" onClick={confirm}/>
+    </>
+}
+
+function OfferIdEditor({value, setValue}) {
+    return <TextEditor value={value} setValue={setValue} mask={/[\D]/g}/>
+}
+
+function LiquidityPoolEditor({value, setValue}) {
+    if (!setValue) {
+        if (/^[a-f0-9]{64}$/.test(value)) { //remap hex format to pool id format
+            try {
+                value = StrKey.encodeLiquidityPool(Buffer.from(value, 'hex'))
+            } catch (_) {
+            }
+        }
+        if (!StrKey.isValidLiquidityPool(value))
+            return <span className="dimmed">(Invalid pool)</span>
+        if (value.startsWith('native'))
+            return <span className="dimmed">(Native pool)</span>
+        return <AssetLink asset={value} link={false}/>
+    }
+    return <TextEditor value={value} setValue={setValue} mask={/[\W]/g}/>
+}
+
+function MemoEditor({value, setValue}) {
+    return <TextEditor value={value} setValue={setValue} mask={v => v.substring(0, 64)}/>
+}
+
+export function TopicEditor({value, setValue}) {
+    if (!setValue)
+        return <code className="word-break">{value}</code>
+    return <TextEditor value={value} setValue={setValue}/>
+}
+
+const editorMapping = {
+    topic: TopicEditor,
+    type: OperationTypeEditor,
+    account: AccountEditor,
+    source: AccountEditor,
+    destination: AccountEditor,
+    asset: AssetEditor,
+    src_asset: AssetEditor,
+    dest_asset: AssetEditor,
+    from: TimestampEditor,
+    to: TimestampEditor,
+    memo: MemoEditor,
+    offer: OfferIdEditor,
+    pool: LiquidityPoolEditor
+}
+
+export function resolveFilterEditor(field) {
+    return editorMapping[field]
+}