@stellar-expert/ui-framework 1.12.4 → 1.12.6

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

@@ -1,14 +1,21 @@
 import React from 'react'
-import {formatWithPrecision} from '@stellar-expert/formatter'
+import {formatWithAutoPrecision, formatWithPrecision} from '@stellar-expert/formatter'
 import './soroban-tx-metrics.scss'
 
 export default function SorobanTxMetricsView({metrics}) {
     if (!metrics)
         return null
+    const parsedMetrics = parseMetrics(metrics)
     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">
+        {Object.entries(parsedMetrics).map(([key, value]) => <div key={key} className="column column-25">
             <span className="dimmed">{key}: </span><MetricValue value={value}/>
         </div>)}
+        {!!metrics.fee && <div className="column">
+            <span className="dimmed">Fees: </span>
+            {metrics.fee.refundable} <span className="dimmed">refundable, </span>
+            {metrics.fee.nonrefundable} <span className="dimmed">nonrefundable, </span>
+            {metrics.fee.rent} <span className="dimmed">rent</span>
+        </div>}
     </div>
 }
 
@@ -19,6 +26,8 @@ const MetricValue = React.memo(function ({value}) {
     return <>{value}</>
 })
 
+//TODO: add descriptions (see https://github.com/stellar/stellar-core/blob/master/docs/metrics.md)
+
 function parseMetrics(metrics) {
     const res = {}
     for (const [key, value] of Object.entries(metrics)) {
@@ -32,7 +41,7 @@ function parseMetrics(metrics) {
                 }
                 break
             case 'invoke_time_nsecs':
-                res['Invoke time'] = formatWithPrecision(value / 1000, 3) + 'µs'
+                res['Invoke time'] = formatWithAutoPrecision(value / 1000) + 'µs'
                 break
             case 'mem_byte':
                 res['Memory usage'] = formatBytes(value)
@@ -105,5 +114,5 @@ function parseMetrics(metrics) {
 }
 
 function formatBytes(value) {
-    return formatWithPrecision(value, 3) + 'B'
+    return formatWithPrecision(value, 0) + 'B'
 }

package/package.json

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

package/tx/op-description-view.js

@@ -133,7 +133,7 @@ function PathPaymentDescriptionView({op, compact}) {
             const changeEffect = effects.find(e => e.source === source && e.asset === destAssetId && (e.type === 'accountCredited' || e.type === 'accountDebited'))
             if (changeEffect) { //arbitrage successful, otherwise src = dst and no account changes happened
                 const change = BigInt(changeEffect.amount)
-                dst = fromStroops(toStroops(destAmount) + (changeEffect.type === 'accountCredited' ? change : -change))
+                dst = fromStroops(toStroops(sendAmount) + (changeEffect.type === 'accountCredited' ? change : -change))
             }
         } else {
             const creditedEffect = effects.find(e => e.source === destination && e.type === 'accountCredited' && e.asset === destAssetId)