@stellar-expert/ui-framework 1.13.5 → 1.13.6

package/contract/sc-val.js

@@ -63,15 +63,23 @@ export const ScVal = React.memo(function ScVal({value, nested = false, indent =
         case 'nonceKey':
             return <>{val.nonce()._value.toString()}<ScValType type="nonce"/></>
         case 'instance':
-            return <>{val.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></>
+            return <>{val._attributes.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></>
         case 'error':
             const errMessage = value.toXDR('base64')
             return <><span className="condensed" title={errMessage}>{shortenString(errMessage, 50)}</span><ScValType type="error"/></>
         case 'contractId':
             return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value)}/>
         default:
-            if (value.switch().name === 'scvVoid')
-                return '()'
+            switch (value._switch.name) {
+                case 'scvVoid':
+                    return '()'
+                case 'scvContractInstance':
+                    return '<ContractInstance>'
+                case 'scvLedgerKeyContractInstance':
+                    return '<LedgerKeyContractInstance>'
+                case 'scvLedgerKeyNonce':
+                    return '<LedgerKeyNonce>'
+            }
             return <span className="dimmed">(unknown)</span>
     }
 })

package/effect/effect-description.js

@@ -14,6 +14,7 @@ import InvocationInfoView from '../contract/invocation-info-view'
 
 /**
  * @param {{}} effect
+ * @param {{}} operation
  * @return {JSX.Element}
  * @constructor
  */
@@ -211,9 +212,11 @@ export function EffectDescription({effect, operation}) {
         case 'inflation':
             return <>Inflation distribution initialized</>
         case 'contractCodeUploaded':
-            return <>Contract code <ContractCodeWasm wasm={effect.wasm}/> uploaded</>
+            return <>Contract code <LedgerKeyHint effect={effect}><ContractCodeWasm wasm={effect.wasm}/></LedgerKeyHint> uploaded</>
         case 'contractCreated':
             return <>Contract <AccountAddress account={effect.contract}/> created <ContractDetails effect={effect}/></>
+        case 'contractUpdated':
+            return <>Contract <AccountAddress account={effect.contract}/> updated <ContractDetails effect={effect}/></>
         case 'contractInvoked':
             return <>{effect.depth > 0 &&
                 <i className="icon-level-down text-tiny color-primary" style={{paddingLeft: (effect.depth - 1) + 'em'}}/>}
@@ -227,10 +230,11 @@ export function EffectDescription({effect, operation}) {
         case 'contractDataUpdated':
             return <>Contract <AccountAddress account={effect.owner}/>
                 {effect.type === 'contractDataCreated' ? ' created ' : ' updated '} {effect.durability} data{' '}
-                <ScVal value={effect.key}/> with value <ScVal value={effect.value}/>
+                <LedgerKeyHint effect={effect}><ScVal value={effect.key}/></LedgerKeyHint> with value <ScVal value={effect.value}/>
             </>
         case 'contractDataRemoved':
-            return <>Contract <AccountAddress account={effect.owner}/> removed {effect.durability} data <ScVal value={effect.key}/></>
+            return <>Contract <AccountAddress account={effect.owner}/> removed {effect.durability}{' '}
+                data <LedgerKeyHint effect={effect}><ScVal value={effect.key}/></LedgerKeyHint></>
         case 'contractError':
             let errCode = effect.code
             if (errCode?.name) {
@@ -238,6 +242,12 @@ export function EffectDescription({effect, operation}) {
             }
             return <>Execution error {errCode ? <><code>{errCode}</code> </> : null}in <AccountAddress account={effect.contract}/>{': '}
                 <code>{JSON.stringify(effect.details)}</code> </>
+        case 'setTtl':
+            return <>Time-to-live extended to ledger {effect.ttl} for {!!effect.owner && <AccountAddress account={effect.owner}/>}{' '}
+                {ledgerEntryKind[effect.kind]}{' '}
+                <CopyToClipboard text={effect.keyHash}>
+                    <code title={effect.keyHash + ' - click to copy'}>{shortenString(effect.keyHash, 12)}</code>
+                </CopyToClipboard></>
         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/>)</>
@@ -300,5 +310,19 @@ function ContractDetails({effect}) {
 }
 
 function ContractCodeWasm({wasm}) {
-    return <><code title={wasm}>{shortenString(wasm, 16)}</code><CopyToClipboard text={wasm}/></>
+    return <>
+        <code title={wasm}>{shortenString(wasm, 16)}</code>
+        <CopyToClipboard text={wasm}/>
+    </>
+}
+
+function LedgerKeyHint({effect, children}) {
+    if (!effect.keyHash)
+        return children
+    return <span title={'Ledger key ' + effect.keyHash}>{children}</span>
+}
+
+const ledgerEntryKind = {
+    contractData: 'contract state entry',
+    contractCode: 'contract code WASM'
 }

package/effect/op-effects-view.js

@@ -37,10 +37,19 @@ function sortContractEffects(effects) {
         if (aInvocation && bInvocation)
             return 0
         if (!aInvocation && !bInvocation) {
-            const aData = a.type.startsWith('contractData')
-            const bData = b.type.startsWith('contractData')
-            if (aData === bData)
+            const aData = a.type === 'setTtl' || a.type.startsWith('contractData')
+            const bData = b.type === 'setTtl' || b.type.startsWith('contractData')
+            if (aData === bData) {
+                if (a.type === 'setTtl')
+                    return 1
+                if (b.type === 'setTtl')
+                    return -1
+                if (a.durability === 'instance' && a.durability !== b.durability)
+                    return -1
+                if (b.durability === 'instance' && a.durability !== b.durability)
+                    return 1
                 return 0
+            }
             return aData ? 1 : -1
         }
         return aInvocation ? -1 : 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.13.5",
+  "version": "1.13.6",
   "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.7.1",
+    "@stellar-expert/tx-meta-effects-parser": "6.2.0",
     "classnames": ">=2",
     "prop-types": ">=15",
     "qrcode.react": "^3.1.0",

package/tx/op-description.scss

@@ -31,6 +31,11 @@
     background: var(--color-primary);
     border-radius: 50%;
 
+    &.failed {
+      filter: grayscale(1);
+      opacity: 0.7;
+    }
+
     &:before {
       content: '';
       display: block;

package/tx/op-icon.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import cn from 'classnames'
 
 const opIconMapping = {
     feeCharge: 'send-circle',
@@ -50,15 +51,19 @@ const opIconMapping = {
 /**
  * Transaction operation icon
  * @param {OperationDescriptor|'feeCharge'} op - Operation descriptor
+ * @param {Boolean} failed - Whether the transaction failed during execution
  * @constructor
  */
-export const OpIcon = React.memo(function OpIcon({op}) {
+export const OpIcon = React.memo(function OpIcon({op, failed = false}) {
     let type
+    let title
     if (op === 'feeCharge') {
         type = 'feeCharge'
+        title = 'Transaction fees charge'
     } else {
         const {operation} = op
-        type = operation.type
+        title = type = operation.type
+        title = title[0].toUpperCase() + title.substring(1) + ' operation'
         switch (type) {
             case 'payment':
             case 'accountMerge':
@@ -84,10 +89,11 @@ export const OpIcon = React.memo(function OpIcon({op}) {
                 break
         }
     }
-
-
+    if (failed) {
+        title += ' - Transaction failed'
+    }
     const icon = opIconMapping[type]
-    return <div className="op-icon">
+    return <div className={cn('op-icon', {failed})} title={title}>
         <i className={`icon-${icon}`}/>
     </div>
 })

package/tx/tx-operations-list.js

@@ -48,7 +48,7 @@ const TxChargedFee = React.memo(function TxChargedFee({parsedTx, compact}) {
         return null
     return <div className="op-container">
         <div className="op-layout">
-            <OpIcon op="feeCharge"/>
+            <OpIcon op="feeCharge" failed={!parsedTx.successful}/>
             <TxFeeEffect feeEffect={fee} compact={compact}/>
             {!!compact && !parsedTx.isEphemeral && <TxFeeAccountingChanges amount={fee.charged}/>}
         </div>
@@ -73,7 +73,7 @@ export const TxOperationsList = React.memo(function TxOperationsList({
     const [opsExpanded, setOpsExpanded] = useState(false)
     const toggleEffects = useCallback(e => setEffectsExpanded(e.expanded), [])
     const toggleAdditionalOps = useCallback(e => setOpsExpanded(e.expanded), [])
-    let {operations} = parsedTx
+    let {operations, successful} = parsedTx
     let opdiff = 0
     if (!opsExpanded) {
         //filter operations if filtered output is requested
@@ -100,7 +100,7 @@ export const TxOperationsList = React.memo(function TxOperationsList({
         <div className="condensed">
             {operations.map((op, i) => <div className="op-container" key={op.txHash + op.order + op.isEphemeral}>
                 <div className="op-layout">
-                    <OpIcon op={op}/>
+                    <OpIcon op={op} failed={!successful}/>
                     <div>
                         <OpDescriptionView key={parsedTx.txHash + op.order} op={op} compact={compact}/>
                     </div>