@stellar-expert/ui-framework 1.16.7 → 1.17.0

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

@@ -1,127 +1,127 @@
-const operationTypeMap = {
-    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(operationTypeMap[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 [
-                    operationTypeMap.createAccount,
-                    operationTypeMap.accountMerge,
-                    operationTypeMap.payment,
-                    operationTypeMap.pathPaymentStrictReceive,
-                    operationTypeMap.pathPaymentStrictSend,
-                    operationTypeMap.createClaimableBalance,
-                    operationTypeMap.claimClaimableBalance,
-                    operationTypeMap.clawback,
-                    operationTypeMap.clawbackClaimableBalance,
-                    operationTypeMap.inflation
-                ]
-            case 'trustlines':
-                return [
-                    operationTypeMap.changeTrust,
-                    operationTypeMap.allowTrust,
-                    operationTypeMap.setTrustLineFlags
-                ]
-            case 'dex':
-                return [
-                    operationTypeMap.manageSellOffer,
-                    operationTypeMap.manageBuyOffer,
-                    operationTypeMap.createPassiveSellOffer,
-                    operationTypeMap.liquidityPoolDeposit,
-                    operationTypeMap.liquidityPoolWithdraw
-                ]
-            case 'settings':
-                return [
-                    operationTypeMap.createAccount,
-                    operationTypeMap.setOptions,
-                    operationTypeMap.changeTrust,
-                    operationTypeMap.allowTrust,
-                    operationTypeMap.accountMerge,
-                    operationTypeMap.inflation,
-                    operationTypeMap.manageData,
-                    operationTypeMap.bumpSequence,
-                    operationTypeMap.beginSponsoringFutureReserves,
-                    operationTypeMap.endSponsoringFutureReserves,
-                    operationTypeMap.revokeSponsorship,
-                    operationTypeMap.setTrustLineFlags
-                ]
-            case 'contracts':
-                return [
-                    operationTypeMap.invokeHostFunction,
-                    operationTypeMap.bumpFootprintExpiration,
-                    operationTypeMap.restoreFootprint
-                ]
-            default:
-                return [parseInt(filter, 10)]
-        }
-    }
+const operationTypeMap = {
+    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(operationTypeMap[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 [
+                    operationTypeMap.createAccount,
+                    operationTypeMap.accountMerge,
+                    operationTypeMap.payment,
+                    operationTypeMap.pathPaymentStrictReceive,
+                    operationTypeMap.pathPaymentStrictSend,
+                    operationTypeMap.createClaimableBalance,
+                    operationTypeMap.claimClaimableBalance,
+                    operationTypeMap.clawback,
+                    operationTypeMap.clawbackClaimableBalance,
+                    operationTypeMap.inflation
+                ]
+            case 'trustlines':
+                return [
+                    operationTypeMap.changeTrust,
+                    operationTypeMap.allowTrust,
+                    operationTypeMap.setTrustLineFlags
+                ]
+            case 'dex':
+                return [
+                    operationTypeMap.manageSellOffer,
+                    operationTypeMap.manageBuyOffer,
+                    operationTypeMap.createPassiveSellOffer,
+                    operationTypeMap.liquidityPoolDeposit,
+                    operationTypeMap.liquidityPoolWithdraw
+                ]
+            case 'settings':
+                return [
+                    operationTypeMap.createAccount,
+                    operationTypeMap.setOptions,
+                    operationTypeMap.changeTrust,
+                    operationTypeMap.allowTrust,
+                    operationTypeMap.accountMerge,
+                    operationTypeMap.inflation,
+                    operationTypeMap.manageData,
+                    operationTypeMap.bumpSequence,
+                    operationTypeMap.beginSponsoringFutureReserves,
+                    operationTypeMap.endSponsoringFutureReserves,
+                    operationTypeMap.revokeSponsorship,
+                    operationTypeMap.setTrustLineFlags
+                ]
+            case 'contracts':
+                return [
+                    operationTypeMap.invokeHostFunction,
+                    operationTypeMap.bumpFootprintExpiration,
+                    operationTypeMap.restoreFootprint
+                ]
+            default:
+                return [parseInt(filter, 10)]
+        }
+    }
 }

package/tx/tx-list-hooks.js

@@ -1,19 +1,33 @@
-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}`)
+import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks'
+import {useExplorerApi} from '../api/explorer-api-hooks'
+
+/**
+ * React hook that fetches paginated transaction history from the Explorer API
+ * @param {Object} params
+ * @param {Object} params.filters - Query filters (e.g., `{account: [address]}`)
+ * @param {'asc'|'desc'} [params.order='desc'] - Sort order
+ * @param {number} [params.rows=40] - Number of rows per page
+ * @param {boolean} [params.updateLocation=true] - Update browser query string on navigation
+ * @return {ExplorerApiListResponse}
+ */
+export function useTxHistory({filters, order = 'desc', rows = 40, updateLocation = true}) {
+    return useExplorerPaginatedApi(
+        {
+            path: 'tx',
+            query: filters
+        }, {
+            defaultSortOrder: order,
+            limit: rows,
+            updateLocation,
+            defaultQueryParams: {order}
+        })
+}
+
+/**
+ * React hook that fetches transaction details by ID or hash
+ * @param {string} idOrHash - Transaction ID or hash
+ * @return {ExplorerApiResult}
+ */
+export function useTxInfo(idOrHash) {
+    return useExplorerApi(`tx/${idOrHash}`)
 }

package/tx/tx-operations-list.js

@@ -1,116 +1,117 @@
-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" failed={!parsedTx.successful}/>
-            <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 [opsExpanded, setOpsExpanded] = useState(false)
-    const toggleEffects = useCallback(e => setEffectsExpanded(e.expanded), [])
-    const toggleAdditionalOps = useCallback(e => setOpsExpanded(e.expanded), [])
-    let {operations, successful} = parsedTx
-    let opdiff = 0
-    if (!opsExpanded) {
-        //filter operations if filtered output is requested
-        if (filter) {
-            const visibleOps = operations.filter(filter)
-            if (visibleOps.length) {
-                operations = visibleOps
-                opdiff = parsedTx.operations.length - operations.length
-            }
-        }
-        //hide some operations in large transactions to prevent interface hanging
-        if (operations.length > 5) {
-            operations = operations.slice(0, 5)
-            opdiff = parsedTx.operations.length - operations.length
-        }
-    }
-
-    return <div>
-        {!compact && showEffects !== false &&
-            <div className="tx-effects-toggle">
-                <Spoiler micro active expanded={effectsExpanded} showLess="Hide operation details" showMore="Show operation details"
-                         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} failed={!successful}/>
-                    <div>
-                        <OpDescriptionView key={parsedTx.txHash + op.order} op={op} compact={compact}/>
-                    </div>
-                    {!!compact && !op.isEphemeral && <OpAccountingChanges op={op}/>}
-                </div>
-                {effectsExpanded && <OpEffectsView operation={op}/>}
-            </div>)}
-            {showFees && <TxChargedFee {...{parsedTx, compact}}/>}
-        </div>
-        {(opsExpanded || opdiff > 0) && <Spoiler className="text-tiny" expanded={opsExpanded} onChange={toggleAdditionalOps}
-                                                 showMore={`${opdiff} more operation${opdiff > 1 ? 's' : ''} in this transaction`} showLess="Hide additional operations"/>}
-    </div>
-})
+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" failed={!parsedTx.successful}/>
+            <TxFeeEffect feeEffect={fee} compact={compact}/>
+            {!!compact && !parsedTx.isEphemeral && <TxFeeAccountingChanges amount={fee.charged}/>}
+        </div>
+    </div>
+})
+
+/**
+ * Renders a list of transaction operations
+ * @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 [opsExpanded, setOpsExpanded] = useState(false)
+    const toggleEffects = useCallback(e => setEffectsExpanded(e.expanded), [])
+    const toggleAdditionalOps = useCallback(e => setOpsExpanded(e.expanded), [])
+    let {operations, successful} = parsedTx
+    let opdiff = 0
+    if (!opsExpanded) {
+        //filter operations if filtered output is requested
+        if (filter) {
+            const visibleOps = operations.filter(filter)
+            if (visibleOps.length) {
+                operations = visibleOps
+                opdiff = parsedTx.operations.length - operations.length
+            }
+        }
+        //hide some operations in large transactions to prevent interface hanging
+        if (operations.length > 5) {
+            operations = operations.slice(0, 5)
+            opdiff = parsedTx.operations.length - operations.length
+        }
+    }
+
+    return <div>
+        {!compact && showEffects !== false &&
+            <div className="tx-effects-toggle">
+                <Spoiler micro active expanded={effectsExpanded} showLess="Hide operation details" showMore="Show operation details"
+                         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} failed={!successful}/>
+                    <div>
+                        <OpDescriptionView key={parsedTx.txHash + op.order} op={op} compact={compact}/>
+                    </div>
+                    {!!compact && !op.isEphemeral && <OpAccountingChanges op={op}/>}
+                </div>
+                {effectsExpanded && <OpEffectsView operation={op}/>}
+            </div>)}
+            {showFees && <TxChargedFee {...{parsedTx, compact}}/>}
+        </div>
+        {(opsExpanded || opdiff > 0) && <Spoiler className="text-tiny" expanded={opsExpanded} onChange={toggleAdditionalOps}
+                                                 showMore={`${opdiff} more operation${opdiff > 1 ? 's' : ''} in this transaction`} showLess="Hide additional operations"/>}
+    </div>
+})