@stellar-expert/ui-framework 1.12.1 → 1.12.3

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,108 @@
+import {formatWithPrecision} from '@stellar-expert/formatter'
+import './soroban-tx-metrics.scss'
+
+export default function SorobanTxMetricsView({metrics}) {
+    if (!metrics)
+        return null
+    return <div className="soroban-tx-metrics-info row micro-space text-tiny text-monospace condensed">
+        {Object.entries(parseMetrics(metrics)).map(([key, value]) => <div key={key} className="column column-25">
+            <span className="dimmed">{key}: </span><MetricValue value={value}/>
+        </div>)}
+    </div>
+}
+
+const MetricValue = React.memo(function ({value}) {
+    const match = /\D+$/.exec(value)
+    if (match)
+        return <>{value.substring(0, match.index)}<span className="dimmed value-suffix">{value.substring(match.index)}</span></>
+    return <>{value}</>
+})
+
+function parseMetrics(metrics) {
+    const res = {}
+    for (const [key, value] of Object.entries(metrics)) {
+        switch (key) {
+            case 'cpu_insn':
+                res['Instructions'] = formatWithPrecision(value, 0)
+                break
+            case  'emit_event':
+                if (value > 0) {
+                    res['Emitted events'] = value.toString() + ' ' + formatBytes(value)
+                }
+                break
+            case 'invoke_time_nsecs':
+                res['Invoke time'] = formatWithPrecision(value / 1000, 3) + 'µs'
+                break
+            case 'mem_byte':
+                res['Memory usage'] = 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.toString()
+                }
+                break
+            case 'write_entry':
+                if (value > 0) {
+                    res['Entries write'] = value.toString()
+                }
+                break
+            case 'emit_event_byte': //ignore these metrics
+            case 'max_emit_event_byte':
+            case 'max_rw_code_byte':
+            case 'max_rw_data_byte':
+            case 'max_rw_key_byte':
+            case 'type': //ignore common effect props
+            case 'source':
+            case 'contract':
+                break
+            default:
+                console.log('Unsupported metric: ' + key)
+                break
+        }
+    }
+    return res
+}
+
+function formatBytes(value) {
+    return formatWithPrecision(value, 3) + 'B'
+}

package/effect/soroban-tx-metrics.scss

@@ -0,0 +1,7 @@
+.soroban-tx-metrics-info {
+  line-height: 1.2;
+
+  .value-suffix {
+    padding-left: 2px;
+  }
+}

package/package.json

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

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

@@ -43,7 +43,7 @@ import TxMatcher from './tx-matcher'
  * @return {ParsedTxDetails}
  */
 export function parseTxDetails({network, txEnvelope, result, meta, id, context, createdAt, skipUnrelated, protocol}) {
-    const parsedTx = parseTxOperationsMeta({network, tx: txEnvelope, meta, result, 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)

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">