@stellar-expert/ui-framework 1.9.0

package/tx/op-description.scss

@@ -0,0 +1,98 @@
+.op-container {
+  position: relative;
+
+  + .op-container {
+    padding-top: 0.4em;
+  }
+
+  .op-layout {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    > :nth-child(2) {
+      flex-grow: 4;
+    }
+  }
+
+  .op-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+    position: relative;
+    min-width: 2.4em;
+    max-width: 2.4em;
+    width: 2.4em;
+    height: 2.4em;
+    margin-right: 0.3em;
+    text-align: center;
+    color: var(--color-bg);
+    background: var(--color-primary);
+    border-radius: 50%;
+
+    &:before {
+      content: '';
+      display: block;
+      border-bottom: 1px solid var(--color-text);
+      opacity: 0.2;
+      position: absolute;
+      width: 0.36em;
+      left: -0.36em;
+      top: 1.22em;
+    }
+
+    i {
+      line-height: 1;
+      font-size: 1.6em;
+      display: block;
+    }
+  }
+
+  .accounting-effects {
+    text-align: right;
+    padding-left: 0.5em;
+    font-size: 1rem;
+  }
+
+  /*group brackets*/
+
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    border-left: 1px solid var(--color-text);
+    opacity: 0.2;
+    height: 100%;
+    width: 0.4em;
+    left: -0.4em;
+    top: 0;
+  }
+
+  &:last-child:before {
+    height: 1.65em;
+  }
+
+  &:first-child:before {
+    top: auto;
+    bottom: 0;
+    height: calc(100% - 1.25em);
+  }
+
+  &:only-child {
+    &:before {
+      display: none;
+    }
+
+    .op-icon:before {
+      display: none;
+    }
+  }
+}
+
+.tx-effects-toggle {
+  float: right;
+  position: relative;
+  z-index: 1;
+  margin-top: 0.6em;
+}

package/tx/op-icon.js

@@ -0,0 +1,93 @@
+import React from 'react'
+
+const opIconMapping = {
+    feeCharge: 'send-circle',
+    createAccount: 'hexagon-add',
+    payment: 'send-circle',
+    paymentReceive: 'receive-circle',
+    pathPaymentStrictReceive: 'swap',
+    manageSellOffer: 'dex-offer',
+    createPassiveSellOffer: 'dex-offer',
+    setOptions: 'hexagon-set-options',
+    changeTrust: 'trustlines',
+    changeTrustAdd: 'create-trustline',
+    changeTrustRemove: 'remove-trustline',
+    changeTrustUpdate: 'trustline-flags',
+    allowTrust: 'trustline-flags',
+    accountMerge: 'hexagon-remove',
+    accountMergeReceive: 'receive-circle',
+    inflation: 'hexagon-inflation',
+    manageData: 'grid',
+    manageDataAdd: 'grid-add',
+    manageDataRemove: 'grid-remove',
+    bumpSequence: 'upload',
+    manageBuyOffer: 'dex-offer',
+    pathPaymentStrictSend: 'swap',
+    createClaimableBalance: 'shutdown-circle',
+    claimClaimableBalance: 'icon-ok',
+    claimClaimableBalanceReceive: 'receive-circle',
+    beginSponsoringFutureReserves: 'sponsor',
+    endSponsoringFutureReserves: 'sponsor',
+    revoke: 'revoke',
+    revokeAccountSponsorship: 'revoke',
+    revokeTrustlineSponsorship: 'revoke',
+    revokeOfferSponsorship: 'revoke',
+    revokeDataSponsorship: 'revoke',
+    revokeClaimableBalanceSponsorship: 'revoke',
+    revokeLiquidityPoolSponsorship: 'revoke',
+    revokeSignerSponsorship: 'revoke',
+    clawback: 'clawback',
+    clawbackReceive: 'send-circle',
+    clawbackClaimableBalance: 'icon-ok',
+    setTrustLineFlags: 'trustline-flags',
+    liquidityPoolDeposit: 'droplet',
+    liquidityPoolWithdraw: 'droplet-half',
+    invokeHostFunction: 'flash',
+    bumpFootprintExpiration: 'upload',
+    restoreFootprint: 'upload'
+}
+
+/**
+ * Transaction operation icon
+ * @param {OperationDescriptor|'feeCharge'} op - Operation descriptor
+ * @constructor
+ */
+export const OpIcon = React.memo(function OpIcon({op}) {
+    let type
+    if (op === 'feeCharge') {
+        type = 'feeCharge'
+    } else {
+        const {operation} = op
+        type = operation.type
+        switch (type) {
+            case 'payment':
+            case 'accountMerge':
+            case 'claimClaimableBalance':
+            case 'clawback':
+                if (!op.context?.account?.includes(operation.source)) {
+                    type += 'Receive'
+                }
+                break
+            case 'manageData':
+                if (operation.effects.some(e => e.type === 'dataEntryCreated')) {
+                    type += 'Add'
+                } else if (operation.effects.some(e => e.type === 'dataEntryRemoved')) {
+                    type += 'Remove'
+                }
+                break
+            case 'changeTrust':
+                if (operation.limit > 0) {
+                    type += 'Add'
+                } else {
+                    type += 'Remove'
+                }
+                break
+        }
+    }
+
+
+    const icon = opIconMapping[type]
+    return <div className="op-icon">
+        <i className={`icon-${icon}`}/>
+    </div>
+})

package/tx/parser/op-balance-changes.js

@@ -0,0 +1,62 @@
+const manageOfferOpTypes = ['manageSellOffer', 'manageBuyOffer', 'createPassiveSellOffer']
+
+/**
+ * Calculate operation resulting balance changes
+ * @param {{}} op - Operation descriptor
+ * @return {[{amount: *, source, type: string, asset},{amount: *, source, type: string, asset}]|{length}|*|*[]}
+ */
+export function retrieveOpBalanceChanges(op) {
+    const {effects} = op.operation
+    const changes = effects.filter(e => e.source === op.context && (e.type === 'accountDebited' || e.type === 'accountCredited'))
+    if (changes.length) {
+        changes.sort((a, b) => a.type - b.type)
+        return changes
+    }
+
+    /*if (manageOfferOpTypes.includes(op.operation.type)) {
+        const debitedAmounts = []
+        const creditedAmounts = []
+        let sourceAsset
+        let destAsset
+
+        for (let e of effects) {
+            if (![e.seller, e.source].includes(op.context) || e.type !== 'trade')
+                continue
+            let {amount} = e
+            sourceAsset = e.asset[1]
+            destAsset = e.asset[0]
+            if (e.seller === op.context) {
+                amount = amount.slice().reverse()
+                sourceAsset = e.asset[1]
+                destAsset = e.asset[0]
+            }
+            debitedAmounts.push(amount[1])
+            creditedAmounts.push(amount[0])
+        }
+        const res = []
+        if (debitedAmounts.length) {
+            res.push({
+                type: 'accountDebited',
+                source: op.context,
+                asset: sourceAsset,
+                amount: sumAmounts(debitedAmounts)
+            })
+        }
+
+        if (creditedAmounts.length) {
+            res.push({
+                type: 'accountCredited',
+                source: op.context,
+                asset: destAsset,
+                amount: sumAmounts(creditedAmounts)
+            })
+        }
+        return res
+    }*/
+    return []
+}
+/*
+
+function sumAmounts(amounts) {
+    return amounts.reduce((prev, v) => prev.add(v), new Bignumber(0))
+}*/

package/tx/parser/op-descriptor.js

@@ -0,0 +1,49 @@
+export default class OperationDescriptor {
+    /**
+     * @type {BaseOperation} - Operation properties
+     * @readonly
+     */
+    operation
+    /**
+     * @type {String} - Parent transaction hash
+     * @readonly
+     */
+    txHash
+    /**
+     * @type {Number} - Application order
+     * @readonly
+     */
+    order
+    /**
+     * @type {Boolean} - True for unsubmitted|unsuccessful transactions
+     * @readonly
+     */
+    isEphemeral
+    /**
+     * @type {Boolean} - Whether the enclosing transaction has been successfully executed
+     * @readonly
+     */
+    successful
+
+    /**
+     * Prepare descriptors for transaction operations
+     * @param {BaseOperation[]} operations
+     * @param {String} txHash
+     * @param {Boolean} isEphemeral
+     * @param {Boolean} successful
+     * @return {OperationDescriptor[]}
+     */
+    static parseOperations(operations, txHash, isEphemeral, successful) {
+        return operations.map((operation, i) => {
+            const op = new OperationDescriptor()
+            Object.assign(op, {
+                txHash,
+                order: i,
+                operation,
+                isEphemeral,
+                successful
+            })
+            return op
+        })
+    }
+}

package/tx/parser/tx-details-parser.js

@@ -0,0 +1,75 @@
+import {parseTxOperationsMeta} from '@stellar-expert/tx-meta-effects-parser'
+import OperationDescriptor from './op-descriptor'
+import TxMatcher from './tx-matcher'
+
+/**
+ * @typedef {Object} ParsedTxDetails - Parsed transaction
+ * @property {OperationDescriptor[]} operations - Parsed operation descriptors
+ * @property {Transaction|FeeBumpTransaction} tx - Parsed transaction
+ * @property {String} txHash - Transaction hash
+ * @property {String} context - Account address, asset name, offer id
+ * @property {String} contextType - Resolved context type
+ * @property {Boolean} isEphemeral - True if transaction has not been submitted or rejected
+ * @property {Boolean} unmatched - Whether transaction matches context and filter
+ * @property {Boolean} [successful] - Whether the transaction has been executed successfully or failed during execution
+ * @property {{}[]} [effects] - Transaction-level effects (including fee charges)
+ * @property {String} [createdAt] - Ledger application timestamp
+ */
+
+/**
+ * @typedef {Object} TxFiltersContext
+ * @property {String[]} [type]
+ * @property {String[]} [account]
+ * @property {String[]} [source]
+ * @property {String[]} [destination]
+ * @property {String[]} [asset]
+ * @property {String[]} [src_asset]
+ * @property {String[]} [dest_asset]
+ * @property {String[]} [offer]
+ * @property {String[]} [pool]
+ */
+
+/**
+ * Parse tx details from raw envelope, result, and meta
+ * @param {String} network - Network passphrase or identifier
+ * @param {String} tx - Base64-encoded tx envelope xdr
+ * @param {String} [result] - Base64-encoded tx envelope result
+ * @param {String} [meta] - Base64-encoded tx envelope meta
+ * @param {String} [id] - Unique trasnaction id
+ * @param {TxFiltersContext} [context] - Filters applied to transactions search
+ * @param {String} [createdAt] - Ledger execution timestamp
+ * @param {Boolean} [skipUnrelated] - Ledger execution timestamp
+ * @return {ParsedTxDetails}
+ */
+export function parseTxDetails({network, txEnvelope, result, meta, id, context, createdAt, skipUnrelated}) {
+    const {tx, effects, operations, isEphemeral, failed} = parseTxOperationsMeta({network, tx: txEnvelope, meta, result})
+    const txHash = tx.hash().toString('hex')
+    const txMatcher = new TxMatcher(context, skipUnrelated)
+    const parsedOps = OperationDescriptor.parseOperations(operations, txHash, isEphemeral, !isEphemeral && !failed)
+        .filter(od => txMatcher.matchOperation(od))
+
+    const res = {
+        operations: parsedOps,
+        tx,
+        txHash,
+        context,
+        isEphemeral,
+        unmatched: !parsedOps.length
+    }
+    if (!isEphemeral) {
+        res.effects = effects
+    }
+    if (createdAt) {
+        res.createdAt = createdAt
+    }
+    if (!isEphemeral) {
+        res.successful = !failed
+    }
+    if (id !== undefined) {
+        res.id = id
+    }
+    for (let op of parsedOps) {
+        op.tx = res
+    }
+    return res
+}