@stellar-expert/ui-framework 1.12.0 → 1.12.2

package/effect/effect-description.js

@@ -11,6 +11,11 @@ import {Amount} from '../asset/amount'
 import {CopyToClipboard} from '../interaction/copy-to-clipboard'
 import {ScVal} from '../contract/sc-val'
 
+/**
+ * @param {{}} effect
+ * @return {JSX.Element}
+ * @constructor
+ */
 export function EffectDescription({effect}) {
     switch (effect.type) {
         case 'accountCreated':
@@ -223,6 +228,9 @@ export function EffectDescription({effect}) {
             </>
         case 'contractDataRemoved':
             return <>Contract <AccountAddress account={effect.owner}/> removed data <ScVal value={effect.key}/></>
+        case 'contractError':
+            return <>Execution error {effect.code ? effect.code + ': ' : ''}"{effect.details[0]}"{' '}
+                <code>{JSON.stringify(effect.details.slice(1))}</code> in <AccountAddress account={effect.contract}/></>
         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/>)</>

package/effect/op-effects-view.js

@@ -1,11 +1,21 @@
 import React from 'react'
 import {EffectDescription} from './effect-description'
+import SorobanTxMetricsView from './soroban-tx-metrics-view'
 import './op-effects.scss'
 
 export function OpEffectsView({effects}) {
+    if (!effects.length)
+        return <div className="op-effects">
+            <div className="dimmed">(no effects)</div>
+        </div>
     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>)}
+        {effects.map((e, i) => {
+            if (e.type === 'contractMetrics')
+                return null
+            return <div key={i}>
+                <i className={e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle'}/> <EffectDescription effect={e}/>
+            </div>
+        })}
+        <SorobanTxMetricsView metrics={effects.find(e => e.type === 'contractMetrics')}/>
     </div>
 }

package/effect/soroban-tx-metrics-view.js

@@ -0,0 +1,105 @@
+import {formatWithPrecision} from '@stellar-expert/formatter'
+
+export default function SorobanTxMetricsView({metrics}) {
+    if (!metrics)
+        return null
+    return <div className="text-tiny row micro-space text-monospace">
+        {Object.entries(parseMetrics(metrics)).map(([key, value])=><div key={key} className="column column-33">
+            <span className="dimmed">{key}: </span>{value}
+        </div>)}
+    </div>
+}
+
+function parseMetrics(metrics) {
+    const res = {}
+    for (const [key, value] of Object.entries(metrics)) {
+        switch (key) {
+            case 'cpu_insn':
+                res['CPU instructions'] = formatWithPrecision(value, 0)
+                break
+            case  'emit_event':
+                if (value > 0) {
+                    res['Emitted events'] = value.toString()
+                }
+                break
+            case 'emit_event_byte':
+                if (value > 0) {
+                    res['Emitted events'] += ' ' + formatBytes(value)
+                }
+                break
+            case 'invoke_time_nsecs':
+                res['Invoke time'] = formatWithPrecision(value / 1000, 3) + 'µs'
+                break
+            case 'mem_byte':
+                res['Memory utilization'] = formatBytes(value)
+                break
+            case 'read_code_byte':
+                if (value > 0) {
+                    res['Code read'] = formatBytes(value)
+                }
+                break
+            case 'write_code_byte':
+                if (value > 0) {
+                    res['Code write'] = formatBytes(value)
+                }
+                break
+            case 'ledger_read_byte':
+                if (value > 0) {
+                    res['Ledger read'] = formatBytes(value)
+                }
+                break
+            case 'ledger_write_byte':
+                if (value > 0) {
+                    res['Ledger write'] = formatBytes(value)
+                }
+                break
+            case 'read_data_byte':
+                if (value > 0) {
+                    res['Data read'] = formatBytes(value)
+                }
+                break
+            case 'write_data_byte':
+                if (value > 0) {
+                    res['Data write'] = formatBytes(value)
+                }
+                break
+            case 'read_key_byte':
+                if (value > 0) {
+                    res['Key read'] = formatBytes(value)
+                }
+                break
+            case 'write_key_byte':
+                if (value > 0) {
+                    res['Key write'] = formatBytes(value)
+                }
+                break
+            case 'read_entry':
+                if (value > 0) {
+                    res['Entries read'] = value
+                }
+                break
+            case 'write_entry':
+                if (value > 0) {
+                    res['Entries write'] = value
+                }
+                break
+            case 'max_emit_event_byte':
+            case 'max_rw_code_byte':
+            case 'max_rw_data_byte':
+            case 'max_rw_key_byte': //ignore these metrics
+                break
+            case 'type':
+            case 'source':
+            case 'contract': //ignore other effect params
+                break
+            default:
+                console.log('Unsupported metric: ' + key)
+                break
+        }
+    }
+    return res
+}
+
+function formatBytes(value) {
+    return formatWithPrecision(value, 3) + 'B'
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",

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

@@ -39,10 +39,12 @@ import TxMatcher from './tx-matcher'
  * @param {TxFiltersContext} [context] - Filters applied to transactions search
  * @param {String} [createdAt] - Ledger execution timestamp
  * @param {Boolean} [skipUnrelated] - Ledger execution timestamp
+ * @param {Number} [protocol] – Specific Stellar protocol version for the executed transaction
  * @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})
+export function parseTxDetails({network, txEnvelope, result, meta, id, context, createdAt, skipUnrelated, protocol}) {
+    const parsedTx = parseTxOperationsMeta({network, tx: txEnvelope, meta, result, protocol, processSystemEvents: true})
+    const {tx, effects, operations, isEphemeral, failed} = parsedTx
     const txHash = tx.hash().toString('hex')
     const txMatcher = new TxMatcher(context, skipUnrelated)
     let parsedOps = OperationDescriptor.parseOperations(operations, txHash, isEphemeral, !isEphemeral && !failed)

package/tx/tx-operations-list.js

@@ -94,7 +94,7 @@ export const TxOperationsList = React.memo(function TxOperationsList({
     return <div>
         {!compact && showEffects !== false &&
             <div className="tx-effects-toggle">
-                <Spoiler micro active expanded={effectsExpanded} showLess="Hide operation effects" showMore="Show operation effects"
+                <Spoiler micro active expanded={effectsExpanded} showLess="Hide operation details" showMore="Show operation details"
                          onChange={toggleEffects} style={{margin: '0.2em'}}/>
             </div>}
         <div className="condensed">