@stellar-expert/ui-framework 1.13.0 → 1.13.2

package/contract/invocation-info-view.js

@@ -22,9 +22,9 @@ export default function InvocationInfoView({contract, func, args, result, sac})
         <code>{func}({args.map((arg, i) => <ScValStruct key={i} separate={args.length - i}>
             <ScVal value={arg} nested/>
         </ScValStruct>)})<InvocationResult result={result}/></code>
-        <Tooltip trigger={<i className="trigger icon-info"/>} desiredPlace="top" activation="click" maxWidth="90vw">
+        <Tooltip trigger={<i className="trigger icon-info"/>} desiredPlace="top" activation="click" maxWidth="Min(60em, 40vw)">
             <ExtendedInvocationInfoView {...{contract, func, args, result, sac}}/>
-        </Tooltip>
+        </Tooltip>&nbsp;
     </>
 }
 
@@ -68,7 +68,7 @@ const ExtendedInvocationInfoView = React.memo(function ({contract, func, args, r
         <div className="text-small space">
             {fd.doc ?
                 <>{fd.doc.split('\n').filter(v => !!v).map((v, i) => <div key={i}>{v}</div>)}</> :
-                <span className="dimmed">Function documentation is not included into the WASM</span>}
+                <span className="dimmed text-tiny">No function documentation is available in the contract WASM</span>}
         </div>
     </div>
 })

package/controls/info-tooltip.js

@@ -5,7 +5,7 @@ import {Tooltip} from './tooltip'
 import './info-tooltip.scss'
 
 export const InfoTooltip = React.memo(function InfoTooltip({children, link, icon = 'icon-help', ...otherProps}) {
-    return <Tooltip trigger={<i className={cn('trigger icon info-tooltip small', icon)} {...otherProps}/>}>
+    return <Tooltip trigger={<i className={cn('trigger icon info-tooltip small', icon)} {...otherProps}/>} maxWidth="30em">
         {children}
         {!!link && <a href={link} className="info-tooltip-link" target="_blank">Read more&hellip;</a>}
     </Tooltip>

package/controls/tooltip.js

@@ -166,7 +166,7 @@ export const Tooltip = React.memo(function Tooltip({
                                                        offset = {},
                                                        activation = 'hover',
                                                        children,
-                                                       maxWidth = '20em',
+                                                       maxWidth,
                                                        ...op
                                                    }) {
     const [visible, setVisible] = useState(false)
@@ -187,7 +187,7 @@ export const Tooltip = React.memo(function Tooltip({
             setVisible(true)
             setPosition(position)
             setPlace(place)
-        }, 250)
+        }, 400)
     }
 
     function onMouseLeave(e) {
@@ -206,13 +206,16 @@ export const Tooltip = React.memo(function Tooltip({
     } else {
         triggerProps.onClick = activate
     }
-    const contentStyle = {
-        maxWidth,
+    const containerStyle = {
         left: position.left + 'px',
         top: position.top + 'px'
     }
+    if (maxWidth) {
+        containerStyle.width = '100vw'
+        containerStyle.maxWidth = maxWidth
+    }
 
-    return React.cloneElement(trigger, triggerProps, <div className="tooltip-wrapper" style={contentStyle}>
+    return React.cloneElement(trigger, triggerProps, <div className="tooltip-wrapper" style={containerStyle}>
         <div ref={content} className={cn('tooltip', place, {visible})}>
             <div className="tooltip-content">{rendered ? children : null}</div>
         </div>

package/controls/tooltip.scss

@@ -4,7 +4,7 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
 
 .tooltip-wrapper {
   width: 40rem;
-  max-width: Min(40rem, 80vw);
+  max-width: Min(40rem, 60vw);
   position: absolute;
   visibility: hidden;
   opacity: 0;
@@ -17,7 +17,6 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
   font-size: 0.9*$font-size-base;
   font-style: normal;
   line-height: 1.3;
-  max-width: Min(40rem, 80vw);
   background: var(--color-bg);
   border-color: var(--color-contrast-border);
   border-radius: $border-radius-input;
@@ -76,11 +75,11 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
 }
 
 .trigger {
-  vertical-align: text-top;
+  position: absolute;
   font-size: 1.2rem;
-  position: relative;
-  top: -.3rem;
-  left: .2rem;
+  margin-top: -.3rem;
+  margin-left: .1rem;
+  margin-right: .1rem;
   color: var(--color-primary);
 
   &:before {
@@ -92,10 +91,10 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
     position: absolute;
     opacity: 0.01;
     display: block;
-    width: 200%;
-    height: 200%;
-    left: -50%;
-    top: -50%;
+    width: 2em;
+    height: 2em;
+    left: -0.4em;
+    top: -0.2em;
   }
 
   &:hover {

package/date/date-selector.js

@@ -2,19 +2,12 @@ import React, {useCallback, useEffect, useState} from 'react'
 import {debounce} from 'throttle-debounce'
 import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
 
-export function trimIsoDateSeconds(date) {
-    if (typeof date === 'number') {
-        date = new Date(date)
-    }
-    return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
-}
-
-const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
-
 /**
- * @param {String} value
- * @param {Function} onChange
- * @constructor
+ * @param {String} value - Current input value
+ * @param {DateSelector~OnChange} onChange - Onchange event handler
+ * @param {String} [min] - Minimum allowed date
+ * @param {String} [max] - Maximum allowed date
+ * @param {*} [ref]
  */
 export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
     const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
@@ -30,7 +23,7 @@ export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
         if (value !== newDate) {
             setDate(newDate)
             if (onChange) {
-                onChange(toUnixTimestamp(normalizeDate(newDate)))
+                onChange(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
             }
         }
     }), [onChange, value])
@@ -41,4 +34,22 @@ export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
     return <input type="datetime-local" value={date} className="date-selector condensed" step={60} ref={ref}
                   min={min || minSelectableValue} max={max} onChange={e => selectDate(e.target.value)}
                   style={{width: '11em', overflow: 'hidden'}} {...otherProps}/>
-}
+}
+
+/**
+ * @param {Date|Number} date
+ * @return {String}
+ */
+export function trimIsoDateSeconds(date) {
+    if (typeof date === 'number') {
+        date = new Date(date)
+    }
+    return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
+}
+
+const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
+
+/**
+ * @callback DateSelector~OnChange
+ * @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
+ */

package/effect/effect-description.js

@@ -232,8 +232,12 @@ export function EffectDescription({effect, operation}) {
         case 'contractDataRemoved':
             return <>Contract <AccountAddress account={effect.owner}/> removed {effect.durability} 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}/></>
+            let errCode = effect.code
+            if (errCode?.name) {
+                errCode = errCode.name
+            }
+            return <>Execution error {errCode ? <><code>{errCode}</code> </> : null}in <AccountAddress account={effect.contract}/>{': '}
+                <code>{JSON.stringify(effect.details)}</code> </>
         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,4 +1,5 @@
 import React from 'react'
+import cn from 'classnames'
 import {EffectDescription} from './effect-description'
 import SorobanTxMetricsView from './soroban-tx-metrics-view'
 import './op-effects.scss'
@@ -14,7 +15,7 @@ export function OpEffectsView({operation}) {
             if (e.type === 'contractMetrics')
                 return null
             return <div key={i}>
-                <i className={e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle'}/>
+                <i className={cn('effect-icon', e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle')}/>&thinsp;
                 <EffectDescription effect={e} operation={operation}/>
             </div>
         })}
@@ -35,7 +36,7 @@ function sortContractEffects(effects) {
         const bInvocation = b.type === 'contractInvoked'
         if (aInvocation && bInvocation)
             return 0
-        if (!aInvocation && !bInvocation){
+        if (!aInvocation && !bInvocation) {
             const aData = a.type.startsWith('contractData')
             const bData = b.type.startsWith('contractData')
             if (aData === bData)

package/effect/op-effects.scss

@@ -2,7 +2,7 @@
   padding: 0.2em 0 0 2.6em;
   line-height: 1.8;
 
-  .icon-puzzle {
+  .effect-icon {
     margin-left: -1.4em;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",
@@ -22,7 +22,7 @@
     "@stellar-expert/contract-wasm-interface-parser": "^3.1.0",
     "@stellar-expert/formatter": "^2.3.0",
     "@stellar-expert/navigation": "github:stellar-expert/navigation#v1.0.2",
-    "@stellar-expert/tx-meta-effects-parser": "5.6.5",
+    "@stellar-expert/tx-meta-effects-parser": "5.7.0",
     "classnames": ">=2",
     "prop-types": ">=15",
     "qrcode.react": "^3.1.0",

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, processSystemEvents: true, mapSac: true})
+    const parsedTx = parseTxOperationsMeta({network, tx: txEnvelope, meta, result, protocol, processSystemEvents: true, processFailedOpEffects: true, mapSac: true})
     const {tx, effects, operations, isEphemeral, failed} = parsedTx
     const txHash = tx.hash().toString('hex')
     const txMatcher = new TxMatcher(context, skipUnrelated)