@stellar-expert/ui-framework 1.12.2 → 1.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,37 +1,40 @@
1
1
  import {formatWithPrecision} from '@stellar-expert/formatter'
2
+ import './soroban-tx-metrics.scss'
2
3
 
3
4
  export default function SorobanTxMetricsView({metrics}) {
4
5
  if (!metrics)
5
6
  return null
6
- return <div className="text-tiny row micro-space text-monospace">
7
- {Object.entries(parseMetrics(metrics)).map(([key, value])=><div key={key} className="column column-33">
8
- <span className="dimmed">{key}: </span>{value}
7
+ return <div className="soroban-tx-metrics-info row micro-space text-tiny text-monospace condensed">
8
+ {Object.entries(parseMetrics(metrics)).map(([key, value]) => <div key={key} className="column column-25">
9
+ <span className="dimmed">{key}: </span><MetricValue value={value}/>
9
10
  </div>)}
10
11
  </div>
11
12
  }
12
13
 
14
+ const MetricValue = React.memo(function ({value}) {
15
+ const match = /\D+$/.exec(value)
16
+ if (match)
17
+ return <>{value.substring(0, match.index)}<span className="dimmed value-suffix">{value.substring(match.index)}</span></>
18
+ return <>{value}</>
19
+ })
20
+
13
21
  function parseMetrics(metrics) {
14
22
  const res = {}
15
23
  for (const [key, value] of Object.entries(metrics)) {
16
24
  switch (key) {
17
25
  case 'cpu_insn':
18
- res['CPU instructions'] = formatWithPrecision(value, 0)
26
+ res['Instructions'] = formatWithPrecision(value, 0)
19
27
  break
20
28
  case 'emit_event':
21
29
  if (value > 0) {
22
- res['Emitted events'] = value.toString()
23
- }
24
- break
25
- case 'emit_event_byte':
26
- if (value > 0) {
27
- res['Emitted events'] += ' ' + formatBytes(value)
30
+ res['Emitted events'] = value.toString() + ' ' + formatBytes(value)
28
31
  }
29
32
  break
30
33
  case 'invoke_time_nsecs':
31
34
  res['Invoke time'] = formatWithPrecision(value / 1000, 3) + 'µs'
32
35
  break
33
36
  case 'mem_byte':
34
- res['Memory utilization'] = formatBytes(value)
37
+ res['Memory usage'] = formatBytes(value)
35
38
  break
36
39
  case 'read_code_byte':
37
40
  if (value > 0) {
@@ -75,22 +78,22 @@ function parseMetrics(metrics) {
75
78
  break
76
79
  case 'read_entry':
77
80
  if (value > 0) {
78
- res['Entries read'] = value
81
+ res['Entries read'] = value.toString()
79
82
  }
80
83
  break
81
84
  case 'write_entry':
82
85
  if (value > 0) {
83
- res['Entries write'] = value
86
+ res['Entries write'] = value.toString()
84
87
  }
85
88
  break
89
+ case 'emit_event_byte': //ignore these metrics
86
90
  case 'max_emit_event_byte':
87
91
  case 'max_rw_code_byte':
88
92
  case 'max_rw_data_byte':
89
- case 'max_rw_key_byte': //ignore these metrics
90
- break
91
- case 'type':
93
+ case 'max_rw_key_byte':
94
+ case 'type': //ignore common effect props
92
95
  case 'source':
93
- case 'contract': //ignore other effect params
96
+ case 'contract':
94
97
  break
95
98
  default:
96
99
  console.log('Unsupported metric: ' + key)
@@ -0,0 +1,7 @@
1
+ .soroban-tx-metrics-info {
2
+ line-height: 1.2;
3
+
4
+ .value-suffix {
5
+ padding-left: 2px;
6
+ }
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stellar-expert/ui-framework",
3
- "version": "1.12.2",
3
+ "version": "1.12.3",
4
4
  "description": "StellarExpert shared UI components library",
5
5
  "main": "index.js",
6
6
  "module": "./index.js",