@stellar-expert/ui-framework 1.9.0

package/tx/parser/tx-matcher.js

@@ -0,0 +1,372 @@
+import {LiquidityPoolAsset} from '@stellar/stellar-base'
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {TypeFilterMatcher} from './type-filter-matcher'
+
+export default class TxMatcher {
+    constructor(filters, skipUnrelated = false) {
+        const matcherFilters = {}
+        if (filters) {
+            for (const key of ['account', 'source', 'destination', 'asset', 'src_asset', 'dest_asset', 'offer', 'pool']) {
+                const values = filters[key]
+                if (!values?.length)
+                    continue
+                matcherFilters[key] = values
+                this.noFilters = false
+            }
+        }
+        this.filters = matcherFilters
+        this.typeMatcher = new TypeFilterMatcher(filters.type)
+        this.skipUnrelated = skipUnrelated
+    }
+
+    /**
+     * @type {{[type], [account], [source], [destination], [asset], [src_asset], [dest_asset], [offer], [pool]}}
+     * @private
+     */
+    filters
+    /**
+     * @type {Boolean}
+     * @private
+     */
+    noFilters = true
+    /**
+     * @type {Boolean}
+     * @private
+     */
+    skipUnrelated
+    /**
+     * @type {TypeFilterMatcher}
+     * @private
+     */
+    typeMatcher
+
+    /**
+     * @param {OperationDescriptor} od
+     * @return {Boolean}
+     */
+    matchOperation(od) {
+        if (this.noFilters)
+            return true
+        if (!this.typeMatcher.match(od.operation.type))
+            return false
+        if (!this.matchOperationProps(od))
+            return false
+        return true
+    }
+
+    /**
+     * @param {TransactionBase} tx
+     * @return {Boolean}
+     */
+    matchTxFee(tx) {
+        if (!this.filter.asset?.includes('XLM'))
+            return false
+        const feeSource = tx.feeSource ? tx.feeSource : tx.source
+        if (this.filter.account?.includes(feeSource))
+            return true
+        return !this.skipUnrelated
+    }
+
+    /**
+     * @param {OperationDescriptor} od
+     * @return {Boolean}
+     * @private
+     */
+    matchOperationProps(od) {
+        const matchingProps = this.prepareOperationMatchingProps(od)
+        for (const [key, values] of Object.entries(this.filters)) {
+            const options = matchingProps[key]
+            if (!options)
+                continue
+            for (const value of values)
+                if (options.has(value))
+                    return true
+        }
+        return false
+    }
+
+    /**
+     * @param {OperationDescriptor} od
+     * @returns {{[account], [source], [destination], [asset], [src_asset], [dest_asset], [offer], [pool]}}
+     * @private
+     */
+    prepareOperationMatchingProps(od) {
+        const {filters, skipUnrelated} = this
+        const {operation: op} = od
+        const matchingProps = {}
+        //process accounts
+        if (filters.account || filters.destination) {
+            switch (op.type) {
+                case 'createAccount':
+                case 'accountMerge':
+                case 'payment':
+                case 'pathPaymentStrictSend':
+                case 'pathPaymentStrictReceive':
+                    matchingProps.account = new Set([op.destination])
+                    matchingProps.destination = new Set([op.destination])
+                    break
+                case 'inflation':
+                    if (od.successful) {
+                        const payouts = op.effects.filter(e => e.type === 'accountCredited').map(e => e.source)
+                        if (payouts.length) {
+                            matchingProps.account = new Set(payouts)
+                            matchingProps.destination = new Set(payouts)
+                        }
+                    }
+                    break
+                case 'setOptions':
+                    matchingProps.account = new Set()
+                    if (!skipUnrelated) {
+                        const optionsRelated = [op.inflationDest, op.signer?.key].filter(acc => !!acc)
+                        if (optionsRelated.length) {
+                            matchingProps.account.add(optionsRelated)
+                        }
+                    }
+                    for (const e of (op.effects || []))
+                        if (e.prevSponsor) {
+                            matchingProps.account.add(e.prevSponsor)
+                        }
+                    break
+                case 'allowTrust':
+                case 'setTrustLineFlags':
+                    matchingProps.account = new Set([op.trustor])
+                    matchingProps.destination = new Set([op.trustor])
+                    break
+                case 'createClaimableBalance':
+                    if (!skipUnrelated) {
+                        const indirect = op.claimants.map(c => c.destination)
+                        if (indirect.length) {
+                            matchingProps.account = new Set(...indirect)
+                            matchingProps.destination = new Set(...indirect)
+                        }
+                    }
+                    break
+                case 'beginSponsoringFutureReserves':
+                    matchingProps.account = new Set([op.sponsoredId])
+                    matchingProps.destination = new Set([op.sponsoredId])
+                    break
+                case 'revokeAccountSponsorship':
+                case 'revokeTrustlineSponsorship':
+                case 'revokeOfferSponsorship':
+                case 'revokeDataSponsorship':
+                case 'revokeClaimableBalanceSponsorship':
+                case 'revokeLiquidityPoolSponsorship':
+                case 'revokeSignerSponsorship':
+                case 'revokeSponsorship':
+                    const revokedAccounts = [op.account, op.signer?.key, op.seller].filter(a => !!a)
+                    if (revokedAccounts.length) {
+                        matchingProps.account = new Set(revokedAccounts)
+                        matchingProps.destination = new Set(revokedAccounts)
+                    }
+                    break
+                case 'clawback':
+                    matchingProps.account = new Set([op.from])
+                    matchingProps.destination = new Set([op.from])
+                    break
+                case 'invokeHostFunction':
+                    matchingProps.account = new Set()
+                    for (const effect of op.effects) {
+                        matchingProps.account.add(effect.source)
+                        if (effect.issuer !== undefined) {
+                            matchingProps.account.add(effect.issuer)
+                        }
+                        if (effect.contract !== undefined) {
+                            matchingProps.account.add(effect.contract)
+                        }
+                    }
+                    break
+                case 'liquidityPoolDeposit':
+                case 'liquidityPoolWithdraw':
+                case 'claimClaimableBalance':
+                case 'changeTrust':
+                case 'manageBuyOffer':
+                case 'manageSellOffer':
+                case 'createPassiveSellOffer':
+                case 'manageData':
+                case 'bumpSequence':
+                case 'endSponsoringFutureReserves':
+                case 'clawbackClaimableBalance':
+                case 'bumpFootprintExpiration':
+                case 'restoreFootprint':
+                    matchingProps.account = new Set()
+                    break
+                default:
+                    throw new Error('Unsupported op type: ' + op.type)
+            }
+            if (!matchingProps.account) {
+                matchingProps.account = new Set()
+            }
+            if (!matchingProps.account.has(op.source)) {
+                matchingProps.account.add(op.source)
+            }
+        }
+        //add op source account
+        matchingProps.source = new Set([op.source])
+        //porcess assets
+        if (filters.asset || filters.src_asset || filters.dest_asset)
+            switch (op.type) {
+                case 'createAccount':
+                case 'accountMerge':
+                case 'inflation':
+                    matchingProps.asset = new Set(['XLM'])
+                    matchingProps.src_asset = new Set(['XLM'])
+                    matchingProps.dest_asset = new Set(['XLM'])
+                    break
+                case 'payment':
+                case 'clawback':
+                case 'setTrustLineFlags':
+                case 'createClaimableBalance':
+                case 'revokeAccountSponsorship':
+                case 'revokeTrustlineSponsorship':
+                case 'revokeOfferSponsorship':
+                case 'revokeDataSponsorship':
+                case 'revokeClaimableBalanceSponsorship':
+                case 'revokeLiquidityPoolSponsorship':
+                case 'revokeSignerSponsorship':
+                case 'revokeSponsorship':
+                    if (op.asset) {
+                        const a = [AssetDescriptor.parse(op.asset).toFQAN()]
+                        matchingProps.asset = new Set(a)
+                        matchingProps.src_asset = new Set(a)
+                        matchingProps.dest_asset = new Set(a)
+                    }
+                    break
+                case 'changeTrust': {
+                    const a = [AssetDescriptor.parse(op.line).toFQAN()]
+                    matchingProps.dest_asset = new Set(a)
+                    if (op.line instanceof LiquidityPoolAsset) {
+                        a.push(AssetDescriptor.parse(op.line.assetA).toFQAN())
+                        a.push(AssetDescriptor.parse(op.line.assetB).toFQAN())
+                    }
+                    matchingProps.asset = new Set(a)
+                    matchingProps.src_asset = new Set(a)
+                }
+                    break
+                case 'pathPaymentStrictSend':
+                case 'pathPaymentStrictReceive': {
+                    const src = AssetDescriptor.parse(op.sendAsset).toFQAN()
+                    const dest = AssetDescriptor.parse(op.destAsset).toFQAN()
+                    matchingProps.asset = new Set([src, dest, ...op.path.map(a => AssetDescriptor.parse(a).toFQAN())])
+                    matchingProps.src_asset = new Set([src])
+                    matchingProps.dest_asset = new Set([dest])
+                }
+                    break
+                case 'manageBuyOffer':
+                case 'manageSellOffer':
+                case 'createPassiveSellOffer': {
+                    const selling = AssetDescriptor.parse(op.selling).toFQAN()
+                    const buying = AssetDescriptor.parse(op.buying).toFQAN()
+                    matchingProps.asset = new Set([selling, buying])
+                    matchingProps.src_asset = new Set([selling])
+                    matchingProps.dest_asset = new Set([buying])
+                }
+                    break
+                case 'allowTrust': {
+                    const asset = AssetDescriptor.parse({code: op.assetCode, issuer: op.source}).toFQAN()
+                    matchingProps.asset = new Set([asset])
+                    matchingProps.src_asset = new Set([asset])
+                    matchingProps.dest_asset = new Set([asset])
+                }
+                    break
+                case 'liquidityPoolDeposit':
+                case 'liquidityPoolWithdraw':
+                    if (od.successful) { // TODO: find a workaround for this (operations won't match for failed transactions)
+                        const poolUpdatedEffect = op.effects.find(e => e.type === 'liquidityPoolUpdated')
+                        const assets = poolUpdatedEffect.reserves.map(r => AssetDescriptor.parse(r.asset).toFQAN())
+                        matchingProps.asset = new Set(assets)
+                        matchingProps.src_asset = new Set(assets)
+                        matchingProps.dest_asset = new Set(assets)
+                    }
+                    break
+                case 'invokeHostFunction':
+                    matchingProps.asset = new Set()
+                    matchingProps.src_asset = new Set()
+                    matchingProps.dest_asset = new Set()
+                    const assets = new Set()
+                    for (const effect of op.effects) {
+                        if (effect.asset !== undefined) {
+                            matchingProps.asset.add(effect.asset)
+                            matchingProps.src_asset.add(effect.asset)
+                            matchingProps.dest_asset.add(effect.asset)
+                        }
+                    }
+                    break
+            }
+
+        //process liquidity pools and offers
+        if (filters.pool || filters.offer) {
+            switch (op.type) {
+                case 'liquidityPoolDeposit':
+                case 'liquidityPoolWithdraw':
+                case 'revokeLiquidityPoolSponsorship':
+                    matchingProps.pool = new Set([op.liquidityPoolId])
+                    break
+                case 'changeTrust':
+                case 'revokeTrustlineSponsorship':
+                    const asset = AssetDescriptor.parse(op.line || op.asset).toFQAN()
+                    if (asset.length === 64 && !asset.includes('-')) {
+                        matchingProps.pool = new Set([asset])
+                    }
+                    break
+                case 'manageBuyOffer':
+                case 'manageSellOffer':
+                case 'createPassiveSellOffer':
+                case 'pathPaymentStrictSend':
+                case 'pathPaymentStrictReceive':
+                    if (od.successful) {
+                        const offers = []
+                        const pools = []
+                        for (const e of op.effects)
+                            if (e.type === 'trade') {
+                                if (e.pool) {
+                                    pools.push(e.pool)
+                                }
+                                if (e.offer) {
+                                    offers.push(e.offer)
+                                    if (!skipUnrelated) {
+                                        if (!matchingProps.account) {
+                                            matchingProps.account = new Set()
+                                        }
+                                        if (!matchingProps.account.has(e.seller)) {
+                                            matchingProps.account.add(e.seller)
+                                        }
+                                    }
+                                }
+                            }
+                        if (offers.length) {
+                            matchingProps.offer = new Set(offers)
+                        }
+                        if (pools.length) {
+                            matchingProps.pool = new Set(pools)
+                        }
+                    }
+                    if (op.offerId) {
+                        if (!matchingProps.offer) {
+                            matchingProps.offer = new Set()
+                        }
+                        if (!matchingProps.offer.has(op.offerId)) {
+                            matchingProps.offer.add(op.offerId)
+                        }
+                    }
+                    break
+                case 'revokeOfferSponsorship':
+                    matchingProps.offer = new Set([op.offerId])
+                    break
+                case 'clawback':
+                    matchingProps.account = new Set([op.from])
+                    matchingProps.destination = new Set([op.from])
+                    break
+            }
+        }
+        //TODO: handle trustline authorization effects (deauthorization may cancel offers and withdraw liquidity pool stakes)
+        return matchingProps
+    }
+}
+
+/**
+ * Callback for matching operation by type
+ * @callback TypeMatcherCallback
+ * @param {OperationDescriptor} op - Operation descriptor to match
+ * @return {Boolean}
+ * @internal
+ */

package/tx/parser/type-filter-matcher.js

@@ -0,0 +1,127 @@
+const operatinTypeMap = {
+    createAccount: 0,
+    payment: 1,
+    pathPaymentStrictReceive: 2,
+    pathPaymentStrictSend: 13,
+    createPassiveSellOffer: 4,
+    manageSellOffer: 3,
+    manageBuyOffer: 12,
+    setOptions: 5,
+    changeTrust: 6,
+    allowTrust: 7,
+    accountMerge: 8,
+    inflation: 9,
+    manageData: 10,
+    bumpSequence: 11,
+    createClaimableBalance: 14,
+    claimClaimableBalance: 15,
+    beginSponsoringFutureReserves: 16,
+    endSponsoringFutureReserves: 17,
+    revokeSponsorship: 18,
+    clawback: 19,
+    clawbackClaimableBalance: 20,
+    setTrustLineFlags: 21,
+    liquidityPoolDeposit: 22,
+    liquidityPoolWithdraw: 23,
+    invokeHostFunction: 24,
+    bumpFootprintExpiration: 25,
+    restoreFootprint: 26
+}
+
+export class TypeFilterMatcher {
+    /**
+     * @param {String[]} filters
+     */
+    constructor(filters) {
+        if (!filters?.length)
+            return
+        this.types = new Set()
+        for (const filter of filters) {
+            this.processFilter(filter)
+        }
+    }
+
+    /**
+     * @type {Set}
+     * @readonly
+     * @private
+     */
+    types
+
+    /**
+     * Get unique set of type filters
+     * @return {Boolean}
+     */
+    match(operationType) {
+        return !this.types || this.types.has(operatinTypeMap[operationType])
+    }
+
+    /**
+     * @param {String} filter
+     * @private
+     */
+    processFilter(filter) {
+        for (const type of this.decodeFilter(filter)) {
+            this.types.add(type)
+        }
+    }
+
+    /**
+     * @param {String} filter
+     * @private
+     */
+    decodeFilter(filter) {
+        switch (filter) {
+            case 'payments':
+                return [
+                    operatinTypeMap.createAccount,
+                    operatinTypeMap.accountMerge,
+                    operatinTypeMap.payment,
+                    operatinTypeMap.pathPaymentStrictReceive,
+                    operatinTypeMap.pathPaymentStrictSend,
+                    operatinTypeMap.createClaimableBalance,
+                    operatinTypeMap.claimClaimableBalance,
+                    operatinTypeMap.clawback,
+                    operatinTypeMap.clawbackClaimableBalance,
+                    operatinTypeMap.inflation
+                ]
+            case 'trustlines':
+                return [
+                    operatinTypeMap.changeTrust,
+                    operatinTypeMap.allowTrust,
+                    operatinTypeMap.setTrustLineFlags
+                ]
+            case 'dex':
+                return [
+                    operatinTypeMap.manageSellOffer,
+                    operatinTypeMap.manageBuyOffer,
+                    operatinTypeMap.createPassiveSellOffer,
+                    operatinTypeMap.liquidityPoolDeposit,
+                    operatinTypeMap.liquidityPoolWithdraw
+                ]
+            case 'settings':
+                return [
+                    operatinTypeMap.createAccount,
+                    operatinTypeMap.setOptions,
+                    operatinTypeMap.changeTrust,
+                    operatinTypeMap.allowTrust,
+                    operatinTypeMap.accountMerge,
+                    operatinTypeMap.inflation,
+                    operatinTypeMap.manageData,
+                    operatinTypeMap.bumpSequence,
+                    operatinTypeMap.beginSponsoringFutureReserves,
+                    operatinTypeMap.endSponsoringFutureReserves,
+                    operatinTypeMap.revokeSponsorship,
+                    operatinTypeMap.setTrustLineFlags
+                ]
+            case 'contracts':
+                return [
+                    operatinTypeMap.invokeHostFunction,
+                    operatinTypeMap.bumpFootprintExpiration,
+                    operatinTypeMap.restoreFootprint
+                ]
+            default:
+                return [parseInt(filter, 10)]
+        }
+    }
+}

package/tx/tx-fee-effect.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Amount} from '../asset/amount'
+import {fromStroops} from '@stellar-expert/formatter'
+
+export default function TxFeeEffect({feeEffect, compact}) {
+    const {charged, bid, bump} = feeEffect
+    if (charged)
+        return <div>
+            <Amount amount={fromStroops(charged)} asset="XLM" issuer={!compact}/> transaction {!!bump && 'bump'} fee charged
+        </div>
+    return <div>
+        Charge transaction {!!bump && 'bump'} fee <Amount amount={fromStroops(bid)} asset="XLM" issuer={!compact}/>
+    </div>
+}

package/tx/tx-list-hooks.js

@@ -0,0 +1,19 @@
+import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks'
+import {useExplorerApi} from '../api/explorer-api-hooks'
+
+export function useTxHistory({filters, order = 'desc', rows = 40, updateLocation = true}) {
+    return useExplorerPaginatedApi(
+        {
+            path: 'tx',
+            query: filters
+        }, {
+            defaultSortOrder: order,
+            limit: rows,
+            updateLocation,
+            defaultQueryParams: {order}
+        })
+}
+
+export function useTxInfo(idOrHash) {
+    return useExplorerApi(`tx/${idOrHash}`)
+}

package/tx/tx-operations-list.js

@@ -0,0 +1,105 @@
+import React, {useCallback, useState} from 'react'
+import {Spoiler} from '../interaction/spoiler'
+import {OpEffectsView} from '../effect/op-effects-view'
+import {OpAccountingChanges, TxFeeAccountingChanges} from './op-accounting-changes'
+import TxFeeEffect from './tx-fee-effect'
+import {OpDescriptionView} from './op-description-view'
+import {OpIcon} from './op-icon'
+import './op-description.scss'
+
+/*
+Every operation can be in one of the following states (detected automatically):
+- Ephemeral
+    - Pending (not processed by StellarCore yet)
+    - Rejected (rejected by Horizon or StellarCore during execution)
+- Applied
+    - Processed (applied to the ledger and resulted in some on-chain state changes)
+    - Processed without effects (applied to the ledger but yielded no changes in the ledger state)
+- Failed during the execution
+
+Display context
+- Transaction context
+    - All operations displayed
+    - Source account always visible
+    - No fee charges
+    - Effects displayed
+- Unfiltered view context
+    - All operations displayed
+    - Source account always visible
+    - No fee charges
+    - All effects displayed
+- Filtered view context
+    - Only operations related to the filter context (account/asset/order)
+    - Source account always visible
+    - Fee charges ony for account context
+    - Effects related to the filter context
+- Account history view context
+    - Only operations DIRECTLY related to the current account (skip third-party operations for claimable balances, sponsorship, etc)
+    - Source account displayed only when operation (or transaction) source account not matches current account
+    - Fee charge effects displayed only if charged from the current account
+    - Effects related to the current account
+ */
+
+const TxChargedFee = React.memo(function TxChargedFee({parsedTx, compact}) {
+    if (parsedTx.isEphemeral || !parsedTx.context?.account)
+        return null
+    const fee = parsedTx.effects.find(e => e.type === 'feeCharged')
+    if (!fee || !parsedTx.context.account.includes(fee.source))
+        return null
+    return <div className="op-container">
+        <div className="op-layout">
+            <OpIcon op="feeCharge"/>
+            <TxFeeEffect feeEffect={fee} compact={compact}/>
+            {!!compact && !parsedTx.isEphemeral && <TxFeeAccountingChanges amount={fee.charged}/>}
+        </div>
+    </div>
+})
+
+/**
+ * @param {ParsedTxDetails} parsedTx - Transaction descriptor
+ * @param {Function} [filter] - Filter matcher function
+ * @param {Boolean} [showFees] - Whether to display transaction fees
+ * @param {Boolean} [showEffects] - Whether to show operation effects
+ * @param {Boolean} [compact] - Compact view (without fee charges and accounting changes effects)
+ */
+export const TxOperationsList = React.memo(function TxOperationsList({
+                                                                         parsedTx,
+                                                                         filter = null,
+                                                                         showFees = true,
+                                                                         compact = false,
+                                                                         showEffects
+                                                                     }) {
+    const [effectsExpanded, setEffectsExpanded] = useState(false)
+    const toggleEffects = useCallback(e => setEffectsExpanded(e.expanded), [])
+    let {operations} = parsedTx
+    let opdiff = 0
+    //filter operations if filtered output is requested
+    if (filter) {
+        operations = operations.filter(filter)
+        opdiff = parsedTx.operations.length - operations.length
+    }
+
+    return <div>
+        {!compact && showEffects !== false &&
+            <div className="tx-effects-toggle">
+                <Spoiler micro active expanded={effectsExpanded} showLess="Hide operation effects" showMore="Show operation effects"
+                         onChange={toggleEffects} style={{margin: '0.2em'}}/>
+            </div>}
+        <div className="condensed">
+            {operations.map((op, i) => <div className="op-container" key={op.txHash + op.order + op.isEphemeral}>
+                <div className="op-layout">
+                    <OpIcon op={op}/>
+                    <div>
+                        <OpDescriptionView key={parsedTx.txHash + op.order} op={op} compact={compact}/>
+                    </div>
+                    {!!compact && !op.isEphemeral && <OpAccountingChanges op={op}/>}
+                </div>
+                {effectsExpanded && <OpEffectsView effects={op.operation.effects}/>}
+            </div>)}
+            {showFees && <TxChargedFee {...{parsedTx, compact}}/>}
+            {opdiff > 0 && <div className="dimmed text-small block-indent">
+                {opdiff} more operation{opdiff > 1 && 's'} hidden
+            </div>}
+        </div>
+    </div>
+})