@stellar-expert/ui-framework 1.9.0

package/effect/effect-description.js

@@ -0,0 +1,289 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {AuthRequiredFlag, AuthRevocableFlag, AuthImmutableFlag, AuthClawbackEnabledFlag} from '@stellar/stellar-base'
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {shortenString, formatWithAutoPrecision} from '@stellar-expert/formatter'
+import {AccountAddress} from '../account/account-address'
+import {SignerKey} from '../account/signer-key'
+import {OfferLink, PoolLink} from '../ledger/ledger-entry-link'
+import {AssetLink} from '../asset/asset-link'
+import {Amount} from '../asset/amount'
+import {CopyToClipboard} from '../interaction/copy-to-clipboard'
+import {ScVal} from '../contract/sc-val'
+
+export function EffectDescription({effect}) {
+    switch (effect.type) {
+        case 'accountCreated':
+            return <>Account <AccountAddress account={effect.account}/> created</>
+        case 'accountRemoved':
+            return <>Account <AccountAddress account={effect.source}/> removed</>
+        case 'accountCredited':
+            return <><Amount asset={effect.asset} amount={effect.amount} adjust/> credited to
+                account <AccountAddress account={effect.source}/></>
+        case 'accountDebited':
+            return <><Amount asset={effect.asset} amount={effect.amount} adjust/> debited from
+                account <AccountAddress account={effect.source}/></>
+        case 'accountThresholdsUpdated':
+            return <>Account <AccountAddress account={effect.source}/> set thresholds to {effect.thresholds.join('/')}</>
+        case 'accountHomeDomainUpdated':
+            return <>
+                Account <AccountAddress account={effect.source}/> set home domain to{' '}
+                <a href={'https://' + effect.home_domain} target="_blank" rel="noreferrer noopener">{effect.home_domain}</a>
+            </>
+        case 'accountFlagsUpdated':
+            return <>Account <AccountAddress account={effect.source}/> updated authorization
+                flags: {decodeAccountAuthFlags(effect.flags).join(', ')}</>
+        case 'accountInflationDestinationUpdated':
+            return <>Account <AccountAddress account={effect.source}/> set inflation destination
+                to <AccountAddress account={effect.inflationDestination}/></>
+        case 'accountSignerCreated':
+            return <>Account <AccountAddress account={effect.source}/> added
+                signer <AccountAddress account={effect.signer}/>(w:{effect.weight})</>
+        case 'accountSignerUpdated':
+            return <>Account <AccountAddress account={effect.source}/> updated
+                signer <AccountAddress account={effect.signer}/>(w:{effect.weight})</>
+        case 'accountSignerRemoved':
+            return <>Account <AccountAddress account={effect.source}/> removed
+                signer <AccountAddress account={effect.signer}/></>
+        case 'trustlineCreated':
+            return <>
+                Account <AccountAddress account={effect.source}/> established trustline to <AssetLink asset={effect.asset}/> with
+                limit <Amount asset={effect.asset} amount={effect.limit} issuer={false} icon={false} adjust/>
+            </>
+        case 'trustlineUpdated':
+            return <>
+                Account <AccountAddress account={effect.source}/> updated trustline to <AssetLink asset={effect.asset}/> with
+                limit <Amount asset={effect.asset} amount={effect.limit} issuer={false} icon={false} adjust/>
+            </>
+        case 'trustlineRemoved':
+            return <>Account <AccountAddress account={effect.source}/> removed trustline to <AssetLink asset={effect.asset}/></>
+        case 'trustlineAuthorizationUpdated':
+            return <>
+                Account <AccountAddress account={effect.source}/> updated <AssetLink asset={effect.asset}/> trustline authorization
+                flags ({decodeTrustlineFlags(effect.flags)}) for <AccountAddress account={effect.trustor}/>
+            </>
+        case 'assetMinted':
+            return <><Amount asset={effect.asset} amount={effect.amount} adjust/> minted</>
+        case 'assetBurned':
+            return <>Account <AccountAddress account={effect.source}/> burned <Amount asset={effect.asset} amount={effect.amount} adjust/></>
+        case 'offerCreated':
+            return <OfferChange effect={effect} action="created"/>
+        case 'offerUpdated':
+            return <OfferChange effect={effect} action="updated"/>
+        case 'offerRemoved':
+            return <>DEX offer <OfferLink offer={effect.offer}/> removed</>
+        case 'trade':
+            return <span>
+                Account <AccountAddress account={effect.source}/> exchanged{' '}
+                <span className="nowrap">
+                    <Amount asset={effect.asset[0]} amount={effect.amount[0]} adjust/>{' '}
+                    <span className="icon icon-shuffle color-primary"/>{' '}
+                    <Amount asset={effect.asset[1]} amount={effect.amount[1]} adjust/>
+                </span>{' '}
+                {effect.pool ?
+                    <>(pool <PoolLink pool={effect.pool}/>)</> :
+                    <>(DEX offer <OfferLink offer={effect.offer}/> by <AccountAddress account={effect.seller}/>)</>}
+            </span>
+        case 'sequenceBumped':
+            return <>Account <AccountAddress account={effect.source}/> bumped sequence to {effect.sequence}</>
+        case 'dataEntryCreated':
+        case 'dataEntryUpdated':
+            return <>
+                Account <AccountAddress account={effect.source}/> {effect.type === 'dataEntryCreated' ? 'created' : 'updated'} data entry
+                <span className="word-break condensed text-small"><code>"{effect.name}"</code> = <code>"{effect.value}"</code></span>
+            </>
+        case 'dataEntryRemoved':
+            return <>
+                Account <AccountAddress account={effect.source}/> removed data entry
+                <span className="word-break condensed text-small"><code>"{effect.name}"</code></span>
+            </>
+        case 'claimableBalanceCreated':
+            return <>
+                Account <AccountAddress account={effect.source}/> created claimable
+                balance {shortenString(effect.balance)} <Amount asset={effect.asset} amount={effect.amount} adjust/>
+            </>
+        case 'claimableBalanceRemoved':
+            return <>
+                Account <AccountAddress account={effect.source}/> claimed claimable
+                balance {shortenString(effect.balance)} <Amount asset={effect.asset} amount={effect.amount} adjust/>
+            </>
+        case 'accountSponsorshipCreated':
+        case 'accountSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored account base reserve
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'accountSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked account sponsorship
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'trustlineSponsorshipCreated':
+        case 'trustlineSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored <AssetLink asset={effect.asset}/> trustline reserve
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'trustlineSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked <AssetLink asset={effect.asset}/> trustline sponsorship
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'offerSponsorshipCreated':
+        case 'offerSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored offer <OfferLink offer={effect.offer}/> reserve
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'offerSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked offer <OfferLink offer={effect.offer}/> sponsorship
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'dataSponsorshipCreated':
+        case 'dataSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored "{shortenString(effect.name)}" data reserve
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'dataSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked "{shortenString(effect.name)}" data sponsorship
+                for <AccountAddress account={effect.account}/>
+            </>
+        case 'claimableBalanceSponsorshipCreated':
+        case 'claimableBalanceSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored claimable balance {shortenString(effect.balance)}
+                {effect.source !== effect.sponsor && <> for account <AccountAddress account={effect.source}/></>}
+            </>
+        case 'claimableBalanceSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked claimable balance {shortenString(effect.balance)} sponsorship
+                {effect.source !== effect.prevSponsor && <> for account <AccountAddress account={effect.source}/></>}
+            </>
+        case 'signerSponsorshipCreated':
+        case 'signerSponsorshipUpdated':
+            return <>
+                Account <AccountAddress account={effect.sponsor}/> sponsored signer <SignerKey account={effect.signer}/>{' '}
+                for account <AccountAddress account={effect.account}/>
+            </>
+        case 'signerSponsorshipRemoved':
+            return <>
+                Account <AccountAddress account={effect.prevSponsor}/> revoked signer <SignerKey account={effect.signer}/> sponsorship{' '}
+                for account <AccountAddress account={effect.account}/>
+            </>
+        case 'liquidityPoolDeposited':
+            return <>
+                <span className="nowrap">
+                    <Amount asset={effect.assets[0].asset} amount={effect.assets[0].amount} adjust/>{' '}
+                    and <Amount asset={effect.assets[1].asset} amount={effect.assets[1].amount} adjust/>
+                </span>{' '}
+                deposited to liquidity <span className="nowrap">pool <AssetLink asset={effect.pool}/></span>{' '}
+                <i className="icon icon-shuffle"/> <span className="nowrap">{formatWithAutoPrecision(effect.shares)} pool shares</span>
+            </>
+        case 'liquidityPoolWithdrew':
+            return <>
+                {formatWithAutoPrecision(effect.shares)} pool shares <i className="icon icon-shuffle"/>{' '}
+                <span className="nowrap">
+                    <Amount asset={effect.assets[0].asset} amount={effect.assets[0].amount} adjust/>{' '}
+                    and <Amount asset={effect.assets[1].asset} amount={effect.assets[1].amount} adjust/>
+                </span>{' '}
+                withdrawn from <span className="nowrap"><AssetLink asset={effect.pool}/> pool</span>
+            </>
+        case 'liquidityPoolCreated':
+            return <>Liquidity pool <AssetLink asset={effect.pool}/> created</>
+        case 'liquidityPoolUpdated':
+            return <>Liquidity pool <AssetLink asset={effect.pool}/> updated / {' '}
+                <span className="nowrap">
+                <Amount asset={effect.reserves[0].asset} amount={effect.reserves[0].amount} adjust/> <i className="icon-plus"/>{' '}
+                    <Amount asset={effect.reserves[1].asset} amount={effect.reserves[1].amount} adjust/></span> /{' '}
+                <span className="nowrap">{formatWithAutoPrecision(effect.shares)} pool shares</span>,{' '}
+                <span className="nowrap">{effect.accounts} accounts</span></>
+        case 'liquidityPoolRemoved':
+            return <>Liquidity pool <AssetLink asset={effect.pool}/> removed</>
+        case 'inflation':
+            return <>Inflation distribution initialized</>
+        case 'contractCodeUploaded':
+            return <>Contract code <ContractCodeWasm wasm={effect.wasm}/> uploaded</>
+        case 'contractCreated':
+            return <>Contract <AccountAddress account={effect.contract}/> created <ContractDetails effect={effect}/></>
+        case 'contractInvoked':
+            return <>{effect.depth > 0 &&
+                <i className="icon-level-down text-tiny color-primary" style={{paddingLeft: (effect.depth - 1) + 'em'}}/>}
+                Contract <AccountAddress account={effect.contract}/>{' '} function <code>{effect.function}</code> invoked
+                {!!effect.rawArgs && <> with arguments <ScVal value={effect.rawArgs}/></>}</>
+        case 'contractEvent':
+            return <>Contract <AccountAddress account={effect.contract}/> raised event <ScVal value={effect.rawTopics}/>{' '}
+                with data <ScVal value={effect.rawData}/></>
+        case 'contractDataCreated':
+        case 'contractDataUpdated':
+            return <>Contract <AccountAddress account={effect.owner}/> {effect.type === 'contractDataCreated' ? 'created ' : 'updated '}
+                data <ScVal value={effect.key}/> with value <ScVal value={effect.value}/>
+            </>
+        case 'contractDataRemoved':
+            return <>Contract <AccountAddress account={effect.owner}/> removed data <ScVal value={effect.key}/></>
+        case 'feeCharged':
+            return <><Amount asset="XLM" amount={effect.charged} adjust/> fee charged from <AccountAddress account={effect.source}/> (
+                bid <Amount asset="XLM" amount={effect.bid} adjust/>)</>
+    }
+    return <><i className="icon-warning color-warning"/> Effect {effect.type} not supported</>
+}
+
+EffectDescription.propTypes = {
+    effect: PropTypes.object.isRequired
+}
+
+function decodeAccountAuthFlags(flags) {
+    const res = []
+    if ((flags & AuthRequiredFlag) === AuthRequiredFlag) {
+        res.push('REQUIRED')
+    }
+    if ((flags & AuthRevocableFlag) === AuthRevocableFlag) {
+        res.push('REVOCABLE')
+    }
+    if ((flags & AuthImmutableFlag) === AuthImmutableFlag) {
+        res.push('IMMUTABLE')
+    }
+    if ((flags & AuthClawbackEnabledFlag) === AuthClawbackEnabledFlag) {
+        res.push('CLAWBACK_ENABLED')
+    }
+    return res
+}
+
+function decodeTrustlineFlags(flags) {
+    if ((flags & 2) === 2)
+        return 'FROZEN'
+    if ((flags & 1) === 1)
+        return 'AUTHORIZED'
+    return 'UNAUTHORIZED'
+}
+
+function OfferChange({effect, action}) {
+    return <>DEX offer <OfferLink offer={effect.offer}/> {action} /{' '}
+        <span className="nowrap">
+            <Amount asset={effect.asset[0]} amount={effect.amount} adjust/> <i className="icon icon-shuffle color-primary"/>{' '}
+            <AssetLink asset={effect.asset[1]}/>
+        </span> at <span className="nowrap">
+            {formatWithAutoPrecision(parseFloat(effect.price))}{' '}
+            {AssetDescriptor.parse(effect.asset[1]).toCurrency()}/{AssetDescriptor.parse(effect.asset[0]).toCurrency()}
+        </span>
+    </>
+}
+
+function ContractDetails({effect}) {
+    switch (effect.kind) {
+        case 'wasm':
+            return <>from WASM <ContractCodeWasm wasm={effect.wasmHash}/></>
+        case 'fromAddress':
+            return <>from issuer <AccountAddress account={effect.issuer}/> with salt <ContractCodeWasm wasm={effect.salt}/></>
+        case 'fromAsset':
+            return <>from asset <AssetLink asset={effect.asset}/></>
+        default:
+            return <span className="dimme">(contract type not supported)</span>
+    }
+}
+
+function ContractCodeWasm({wasm}) {
+    return <><code title={wasm}>{shortenString(wasm, 16)}</code><CopyToClipboard text={wasm}/>)</>
+}

package/effect/op-effects-view.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import {EffectDescription} from './effect-description'
+import './op-effects.scss'
+
+export function OpEffectsView({effects}) {
+    return <div className="op-effects">
+        {!effects.length ?
+            <div className="dimmed">(no effects)</div> :
+            effects.map(e => <div><i className="icon-puzzle"/> <EffectDescription effect={e}/></div>)}
+    </div>
+}

package/effect/op-effects.scss

@@ -0,0 +1,8 @@
+.op-effects {
+  padding: 0.2em 0 0 2.6em;
+  line-height: 1.8;
+
+  .icon-puzzle {
+    margin-left: -1.4em;
+  }
+}

package/errors/error-boundary.js

@@ -0,0 +1,98 @@
+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>{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
+}