@stellar-expert/ui-framework 1.12.9 → 1.13.1

package/contract/contract-api.js

@@ -0,0 +1,33 @@
+import {useEffect, useState} from 'react'
+import {useExplorerApi} from '../api/explorer-api-hooks'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+
+export function useContractInfo(address) {
+    return useExplorerApi('contract/' + address, {
+        processResult(data) {
+            if (data?.error && (data.status || data.error.status) === 404) {
+                data.nonExistentContract = true
+            }
+            data.address = address
+            return data
+        }
+    })
+}
+
+export function generateContractSourceLink(hash) {
+    return `${explorerApiOrigin}/explorer/${getCurrentStellarNetwork()}/contract/wasm/${hash}`
+}
+
+export function useContractSource(hash) {
+    const [source, setSource] = useState()
+    useEffect(() => {
+        if (!hash) {
+            setSource(null)
+            return
+        }
+        fetch(generateContractSourceLink(hash))
+            .then(res => res.ok && res.arrayBuffer())
+            .then(src => setSource(src))
+    }, [hash])
+    return source
+}

package/contract/invocation-info-view.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import {parseContractMetadata} from '@stellar-expert/contract-wasm-interface-parser'
+import {shortenString} from '@stellar-expert/formatter'
+import {AccountAddress} from '../account/account-address'
+import {AssetLink} from '../asset/asset-link'
+import {Tooltip} from '../controls/tooltip'
+import {parseScValValue, primitiveTypes, ScVal, ScValStruct} from './sc-val'
+import {useContractSource} from './contract-api'
+import {sacInterface} from './sac-interface'
+
+export default function InvocationInfoView({contract, func, args, result, sac}) {
+    if (typeof args === 'string') {
+        args = parseScValValue(args)
+        if (args._arm !== 'vec') {
+            args = [args]
+        } else {
+            args = args._value
+        }
+    }
+    return <>
+        {!!sac && <><AssetLink asset={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">
+            <ExtendedInvocationInfoView {...{contract, func, args, result, sac}}/>
+        </Tooltip>
+    </>
+}
+
+const InvocationResult = React.memo(function ({result, indent}) {
+    if (result === undefined)
+        return null
+    return <> →&nbsp;{!result ? 'void' : <ScVal value={result} nested indent={indent}/>}</>
+})
+
+const ExtendedInvocationInfoView = React.memo(function ({contract, func, args, result, sac}) {
+    const source = useContractSource(sac ? undefined : contract)
+    if (!source && !sac)
+        return <div className="segment blank text-center">
+            <div className="loader large"/>
+            <div className="text-small">Loading contract...</div>
+        </div>
+    const meta = sac ? sacInterface : parseContractMetadata(Buffer.from(source))
+    const fd = meta.functions[func]
+    if (!fd)
+        return <div className="error"><i className="icon-warning-circle"/> Failed to parse contract code</div>
+    const shouldIndent = args.length > 2 || Object.values(fd.inputs).some(i => !primitiveTypes.has(i.type)) // multi-line display for large argument number or complex types
+    const contractInfo = sac ?
+        <> from asset <AssetLink asset={sac}/></> :
+        <span className="text-tiny dimmed">
+            &emsp;SDK v{meta.sdkVersion.split('#')[0]}&emsp;RUST v{shortenString(meta.rustVersion, 12)}
+        </span>
+    const contractArgNames = Object.keys(fd.inputs)
+    //TODO: show contract validation info
+    return <div>
+        <div>
+            Contract <AccountAddress account={contract}/>{contractInfo}
+        </div>
+        <div className="space">
+            <code className="block" style={{padding: '0.4em 0.8em'}}>{func}({args.map((arg, i) =>
+                <ScValStruct key={i} separate={args.length - i}>
+                    {shouldIndent ? <><br/>&emsp;</> : null}
+                    <span className="dimmed">{contractArgNames[i]}: </span>
+                    <ScVal value={arg} nested indent={shouldIndent}/>
+                </ScValStruct>)})<InvocationResult indent result={result}/></code>
+        </div>
+        <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>}
+        </div>
+    </div>
+})

package/contract/sac-interface.js

@@ -0,0 +1,131 @@
+export const sacInterface = {
+    functions: {
+        allowance: {
+            inputs: {
+                from: {type: 'address'},
+                spender: {type: 'address'}
+            },
+            outputs: ['i128'],
+            doc: `Returns the allowance for "spender" to transfer from "from".
+# Arguments
+* "from" - The address holding the balance of tokens to be drawn from.
+* "spender" - The address spending the tokens held by "from".`
+        },
+        approve: {
+            inputs: {
+                from: {type: 'address'},
+                spender: {type: 'address'},
+                amount: {type: 'i128'},
+                expiration_ledger: {type: 'u32'}
+            },
+            doc: `Set the allowance by "amount" for "spender" to transfer/burn from "from".
+# Arguments
+* "from" - The address holding the balance of tokens to be drawn from.
+* "spender" - The address being authorized to spend the tokens held by "from".
+* "amount" - The tokens to be made available to "spender".
+* "expiration_ledger" - The ledger number where this allowance expires. Cannot be less than the current ledger number unless the amount is being set to 0. An expired entry (where expiration_ledger < the current ledger number) should be treated as a 0 amount allowance.
+# Events
+Emits an event with topics "["approve", from: Address, spender: Address], data = [amount: i128, expiration_ledger: u32]"`
+        },
+        balance: {
+            inputs: {
+                id: {type: 'address'}
+            },
+            outputs: ['i128'],
+            doc: `Returns the balance of "id".
+# Arguments
+* "id" - The address for which a balance is being queried. If the address has no existing balance, returns 0.`
+        },
+        transfer: {
+            inputs: {
+                from: {type: 'address'},
+                to: {type: 'address'},
+                amount: {type: 'i128'}
+            },
+            doc: `Transfer "amount" from "from" to "to".
+# Arguments
+* "from" - The address holding the balance of tokens which will be withdrawn from.
+* "to" - The address which will receive the transferred tokens.
+* "amount" - The amount of tokens to be transferred.
+# Events
+Emits an event with topics "["transfer", from: Address, to: Address], data = [amount: i128]"`
+        },
+        transfer_from: {
+            inputs: {
+                spender: {type: 'address'},
+                from: {type: 'address'},
+                to: {type: 'address'},
+                amount: {type: 'i128'}
+            },
+            doc: `Transfer "amount" from "from" to "to", consuming the allowance of "spender". Authorized by spender ("spender.require_auth()").
+# Arguments
+* "spender" - The address authorizing the transfer, and having its allowance consumed during the transfer.
+* "from" - The address holding the balance of tokens which will be withdrawn from.
+* "to" - The address which will receive the transferred tokens.
+* "amount" - The amount of tokens to be transferred.
+# Events
+Emits an event with topics "["transfer", from: Address, to: Address], data = [amount: i128]"`
+        },
+        mint: {
+            inputs: {
+                spender: {type: 'address'},
+                to: {type: 'address'},
+                amount: {type: 'i128'}
+            },
+            doc: `Mint "amount" of tokens to "to".
+# Arguments
+* "spender" - The address authorizing the mint.
+* "to" - The address which will receive the minted tokens.
+* "amount" - The amount of tokens to be minted.
+# Events
+Emits an event with topics "["mint", spender: Address, from: Address], data = [amount: i128]"`
+        },
+        burn: {
+            inputs: {
+                from: {type: 'address'},
+                amount: {type: 'i128'}
+            },
+            doc: `Burn "amount" from "from".
+# Arguments
+* "from" - The address holding the balance of tokens which will be burned from.
+* "amount" - The amount of tokens to be burned.
+# Events
+Emits an event with topics "["burn", from: Address], data = [amount: i128]"`
+        },
+        burn_from: {
+            inputs: {
+                spender: {type: 'address'},
+                from: {type: 'address'},
+                amount: {type: 'i128'}
+            },
+            doc: `Burn "amount" from "from", consuming the allowance of "spender".
+# Arguments
+* "spender" - The address authorizing the burn, and having its allowance consumed during the burn.
+* "from" - The address holding the balance of tokens which will be burned from.
+* "amount" - The amount of tokens to be burned.
+# Events
+Emits an event with topics "["burn", from: Address], data = [amount: i128]"`
+        },
+        decimals: {
+            inputs: {},
+            outputs: ['u32'],
+            doc: `Returns the number of decimals used to represent amounts of this token.
+# Panics
+If the contract has not yet been initialized.`
+        },
+        name: {
+            inputs: {},
+            outputs: ['String'],
+            doc: `Returns the name for this token.
+# Panics
+If the contract has not yet been initialized.`
+        },
+        symbol: {
+            inputs: {},
+            outputs: ['String'],
+            doc: `Returns the symbol for this token.
+# Panics
+If the contract has not yet been initialized.`
+        }
+    }
+}

package/contract/sc-val.js

@@ -6,7 +6,7 @@ import {shortenString} from '@stellar-expert/formatter'
 import {AccountAddress} from '../account/account-address'
 import './sc-val.scss'
 
-export const ScVal = React.memo(function ScVal({value, nested = false, indent = false}) {
+export const ScVal = React.memo(function ScVal({value, nested = false, indent = false, wrapObjects = true}) {
     if (!nested)
         return <code className={cn('sc-val', {block: indent})}><ScVal value={value} indent={indent} nested/></code>
     if (!value)
@@ -14,10 +14,12 @@ export const ScVal = React.memo(function ScVal({value, nested = false, indent =
     if (typeof value === 'string') {
         value = xdr.ScVal.fromXDR(value, 'base64')
     }
-    if (value instanceof Array)
-        return <>[{value.map((v, i) => <ScValStruct key={i} indent={indent} separate={value.length - i}>
+    if (value instanceof Array) {
+        const values = value.map((v, i) => <ScValStruct key={i} indent={indent} separate={value.length - i}>
             <ScVal value={v} indent={indent} nested/>
-        </ScValStruct>)}]</>
+        </ScValStruct>)
+        return wrapObjects ? <>[{values}]</> : <>{values}</>
+    }
     const val = value._value
     switch (value._arm) {
         case 'vec':
@@ -25,11 +27,11 @@ export const ScVal = React.memo(function ScVal({value, nested = false, indent =
                 <ScVal value={v} indent={indent} nested/>
             </ScValStruct>)}]</>
         case 'map':
-            return <>&#123;{val.map((kv, i) =>
+            const values = val.map((kv, i) =>
                 <ScValStruct key={i} indent={indent} separate={val.length - i}>
                     <ScVal value={kv.key()} indent={indent} nested/>: <ScVal value={kv.val()} indent={indent} nested/>
-                </ScValStruct>)}
-                &#125;</>
+                </ScValStruct>)
+            return wrapObjects ? <>&#123;{values}&#125;</> : <>{values}</>
         case 'b':
             return <>{val.toString()}<ScValType type="bool"/></>
         case 'i32':
@@ -57,7 +59,7 @@ export const ScVal = React.memo(function ScVal({value, nested = false, indent =
             return <><span className="condensed">{shortenString(asBytes, 86)}</span><ScValType type="bytes"/></>
         case 'str':
         case 'sym':
-            return <>"{val.toString()}"<ScValType type={value._arm}/></>
+            return <span className="word-break">"{val.toString()}"<ScValType type={value._arm}/></span>
         case 'nonceKey':
             return <>{val.nonce()._value.toString()}<ScValType type="nonce"/></>
         case 'instance':
@@ -74,15 +76,21 @@ export const ScVal = React.memo(function ScVal({value, nested = false, indent =
     }
 })
 
+export function parseScValValue(value) {
+    return xdr.ScVal.fromXDR(value, 'base64')
+}
+
 const ScValType = React.memo(function ScValType({type}) {
     return <sub className="dimmed text-tiny" style={{padding: '0 0.2em'}}>{type}</sub>
 })
 
-const ScValStruct = React.memo(function ScValStruct({indent, children, separate}) {
+export const ScValStruct = React.memo(function ScValStruct({indent, children, separate}) {
     const separator = separate > 1 ? <>, </> : null
     if (!indent)
         return <>{children}{separator}</>
     return <div className="block-indent">
         {children}{separator}
     </div>
-})
+})
+
+export const primitiveTypes = new Set(['b', 'i32', 'u32', 'i256', 'u256', 'i128', 'u128', 'i64', 'u64', 'timepoint', 'duration', 'address', 'bytes', 'str', 'sym', 'nonceKey', 'contractId', 'instance'])

package/controls/tooltip.js

@@ -1,4 +1,4 @@
-import React, {useState, useRef} from 'react'
+import React, {useState, useRef, useCallback, useMemo} from 'react'
 import cn from 'classnames'
 import './tooltip.scss'
 
@@ -152,47 +152,69 @@ function parseOffset(offset) {
 
 /**
  * Tooltip component
- * @param {any} trigger
+ * @param {HTMLElement} trigger
  * @param {PositionDescriptor} desiredPlace
- * @param {PositionOffset} offset?
- * @param {String} maxWidth?
- * @param {any} children?
+ * @param {PositionOffset} [offset]
+ * @param {'hover'|'click'} [activation]
+ * @param {String} [maxWidth]
+ * @param {*} [children]
  * @constructor
  */
-export const Tooltip = React.memo(function Tooltip({trigger, desiredPlace = 'top', offset = {}, children, maxWidth = '20em', ...op}) {
-    const [visible, setVisible] = useState(false),
-        [place, setPlace] = useState('top'),
-        [position, setPosition] = useState({top: 0, left: 0}),
-        content = useRef(null)
-
-    function mouseEnter(e) {
+export const Tooltip = React.memo(function Tooltip({
+                                                       trigger,
+                                                       desiredPlace = 'top',
+                                                       offset = {},
+                                                       activation = 'hover',
+                                                       children,
+                                                       maxWidth = '20em',
+                                                       ...op
+                                                   }) {
+    const [visible, setVisible] = useState(false)
+    const [rendered, setRendered] = useState(false)
+    const [place, setPlace] = useState('top')
+    const [position, setPosition] = useState({top: 0, left: 0})
+    const content = useRef(null)
+
+    function activate(e) {
         if (visible)
             return
-        const {place, position} = calculateTooltipPosition(e.currentTarget, content.current, desiredPlace, offset)
-        setVisible(true)
-        setPosition(position)
-        setPlace(place)
+        const {currentTarget} = e
+        setRendered(true)
+        setTimeout(() => {
+            if (visible)
+                return
+            const {place, position} = calculateTooltipPosition(currentTarget, content.current, desiredPlace, offset)
+            setVisible(true)
+            setPosition(position)
+            setPlace(place)
+        }, 250)
     }
 
-    function mouseLeave(e) {
+    function onMouseLeave(e) {
         if (!visible)
             return
         setVisible(false)
+        setRendered(false)
     }
 
     const triggerProps = {
-        onMouseEnter: e => mouseEnter(e),
-        onMouseLeave: e => mouseLeave(e),
+        onMouseLeave,
         ...op
     }
+    if (activation === 'hover') {
+        triggerProps.onMouseEnter = activate
+    } else {
+        triggerProps.onClick = activate
+    }
     const contentStyle = {
         maxWidth,
         left: position.left + 'px',
         top: position.top + 'px'
     }
+
     return React.cloneElement(trigger, triggerProps, <div className="tooltip-wrapper" style={contentStyle}>
-        <div ref={content} className={cn('tooltip', place)}>
-            <div className="tooltip-content">{children}</div>
+        <div ref={content} className={cn('tooltip', place, {visible})}>
+            <div className="tooltip-content">{rendered ? children : null}</div>
         </div>
     </div>)
 })

package/controls/tooltip.scss

@@ -21,7 +21,7 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
   background: var(--color-bg);
   border-color: var(--color-contrast-border);
   border-radius: $border-radius-input;
-  box-shadow: 0 2px 4px -1px var(--color-backdrop);
+  box-shadow: 0 1px 6px 2px var(--color-backdrop);
   padding: 1rem 1.4rem;
   letter-spacing: normal;
   word-break: normal;
@@ -69,6 +69,10 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
     z-index: 5;
     position: relative;
   }
+
+  &.visible {
+    visibility: visible;
+  }
 }
 
 .trigger {
@@ -78,19 +82,28 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
   top: -.3rem;
   left: .2rem;
   color: var(--color-primary);
-  transition: color 0.15s ease 0.3s;
 
   &:before {
     opacity: 0.4;
   }
 
+  &:after {
+    content: '';
+    position: absolute;
+    opacity: 0.01;
+    display: block;
+    width: 200%;
+    height: 200%;
+    left: -50%;
+    top: -50%;
+  }
+
   &:hover {
     &:before {
       opacity: 1;
     }
 
     & > .tooltip-wrapper {
-      visibility: visible;
       opacity: 1;
     }
   }

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/date/utc-timestamp.js

@@ -5,12 +5,18 @@ import {normalizeDate, formatDateUTC} from '@stellar-expert/formatter'
 import {BlockSelect} from '../interaction/block-select'
 
 export const UtcTimestamp = React.memo(function UtcTimestamp({date, dateOnly, className}) {
-    date = normalizeDate(date)
-    let formatted = formatDateUTC(date)
-    if (dateOnly) {
-        formatted = formatted.split(' ')[0]
-    } else {
-        formatted += ' UTC'
+    let formatted
+    try {
+        date = normalizeDate(date)
+        formatted = formatDateUTC(date)
+        if (dateOnly) {
+            formatted = formatted.split(' ')[0]
+        } else {
+            formatted += ' UTC'
+        }
+    } catch (e) {
+        console.error(e)
+        return null
     }
     const localTime = date.toString().replace(/ \(.+\)/, '').replace(/\w+ /, '')
     return <BlockSelect className={cn('condensed nowrap', className)} title={localTime}>{formatted}</BlockSelect>

package/effect/effect-description.js

@@ -10,13 +10,14 @@ import {AssetLink} from '../asset/asset-link'
 import {Amount} from '../asset/amount'
 import {CopyToClipboard} from '../interaction/copy-to-clipboard'
 import {ScVal} from '../contract/sc-val'
+import InvocationInfoView from '../contract/invocation-info-view'
 
 /**
  * @param {{}} effect
  * @return {JSX.Element}
  * @constructor
  */
-export function EffectDescription({effect}) {
+export function EffectDescription({effect, operation}) {
     switch (effect.type) {
         case 'accountCreated':
             return <>Account <AccountAddress account={effect.account}/> created</>
@@ -216,18 +217,20 @@ export function EffectDescription({effect}) {
         case 'contractInvoked':
             return <>{effect.depth > 0 &&
                 <i className="icon-level-down text-tiny color-primary" style={{paddingLeft: (effect.depth - 1) + 'em'}}/>}
-                Contract <AccountAddress account={effect.contract}/>{' '} function <code>{effect.function}</code> invoked
-                {!!effect.rawArgs && <> with arguments <ScVal value={effect.rawArgs}/></>}</>
+                Contract <AccountAddress account={effect.contract}/> invoked{' '}
+                <InvocationInfoView func={effect.function} args={effect.rawArgs} contract={effect.contract} result={effect.result} sac={operation.operation.sacMap?.[effect.contract]}/>
+            </>
         case 'contractEvent':
             return <>Contract <AccountAddress account={effect.contract}/> raised event <ScVal value={effect.rawTopics}/>{' '}
                 with data <ScVal value={effect.rawData}/></>
         case 'contractDataCreated':
         case 'contractDataUpdated':
-            return <>Contract <AccountAddress account={effect.owner}/> {effect.type === 'contractDataCreated' ? 'created ' : 'updated '}
-                data <ScVal value={effect.key}/> with value <ScVal value={effect.value}/>
+            return <>Contract <AccountAddress account={effect.owner}/>
+                {effect.type === 'contractDataCreated' ? ' created ' : ' updated '} {effect.durability} data{' '}
+                <ScVal value={effect.key}/> with value <ScVal value={effect.value}/>
             </>
         case 'contractDataRemoved':
-            return <>Contract <AccountAddress account={effect.owner}/> removed data <ScVal value={effect.key}/></>
+            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}/></>

package/effect/op-effects-view.js

@@ -3,7 +3,8 @@ import {EffectDescription} from './effect-description'
 import SorobanTxMetricsView from './soroban-tx-metrics-view'
 import './op-effects.scss'
 
-export function OpEffectsView({effects}) {
+export function OpEffectsView({operation}) {
+    const effects = getEffects(operation)
     if (!effects.length)
         return <div className="op-effects">
             <div className="dimmed">(no effects)</div>
@@ -13,9 +14,35 @@ export function OpEffectsView({effects}) {
             if (e.type === 'contractMetrics')
                 return null
             return <div key={i}>
-                <i className={e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle'}/> <EffectDescription effect={e}/>
+                <i className={e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle'}/>
+                <EffectDescription effect={e} operation={operation}/>
             </div>
         })}
         <SorobanTxMetricsView metrics={effects.find(e => e.type === 'contractMetrics')}/>
     </div>
+}
+
+function getEffects(op) {
+    let {effects} = op.operation
+    if (op.operation.type === 'invokeHostFunction')
+        return sortContractEffects([...effects])
+    return effects
+}
+
+function sortContractEffects(effects) {
+    effects.sort((a, b) => {
+        const aInvocation = a.type === 'contractInvoked'
+        const bInvocation = b.type === 'contractInvoked'
+        if (aInvocation && bInvocation)
+            return 0
+        if (!aInvocation && !bInvocation){
+            const aData = a.type.startsWith('contractData')
+            const bData = b.type.startsWith('contractData')
+            if (aData === bData)
+                return 0
+            return aData ? 1 : -1
+        }
+        return aInvocation ? -1 : 1
+    })
+    return effects
 }

package/index.js

@@ -81,6 +81,8 @@ export * from './tx/tx-operations-list'
 export * from './tx/parser/tx-details-parser'
 export * from './tx/tx-list-hooks'
 export * from './effect/effect-description'
+//contract-related components
+export * from './contract/contract-api'
 //Stellar-specific utils
 export * from './stellar/key-type'
 export * from './stellar/signature-hint-utils'

package/ledger/ledger-entry-href-formatter.js

@@ -1,7 +1,7 @@
 import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
- * @param {'account'|'asset'|'ledger'|'tx'|'op'|'offer'} type
+ * @param {'account'|'asset'|'ledger'|'tx'|'op'|'offer'|'contract'} type
  * @param {String|Number} id
  * @param {String} [network]
  * @return {String}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.12.9",
+  "version": "1.13.1",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",
@@ -14,14 +14,15 @@
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",
   "peerDependencies": {
-    "@stellar/stellar-base": "^12.0.0",
-    "@stellar/stellar-sdk": "^12.0.1",
-    "@stellar-expert/asset-descriptor": "^1.3.0",
+    "@stellar/stellar-base": "^12.1.0",
+    "@stellar/stellar-sdk": "^12.2.0",
+    "@stellar-expert/asset-descriptor": "^1.3.3",
     "@stellar-expert/claimable-balance-utils": "^1.4.1",
     "@stellar-expert/client-cache": "github:stellar-expert/client-cache",
+    "@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.5.0",
+    "@stellar-expert/tx-meta-effects-parser": "5.6.5",
     "classnames": ">=2",
     "prop-types": ">=15",
     "qrcode.react": "^3.1.0",

package/tx/op-description-view.js

@@ -15,6 +15,7 @@ import {ClaimableBalanceClaimants} from '../claimable-balance/claimable-balance-
 import {CopyToClipboard} from '../interaction/copy-to-clipboard'
 import {useStellarNetwork} from '../state/stellar-network-hooks'
 import {ScVal} from '../contract/sc-val'
+import InvocationInfoView from '../contract/invocation-info-view'
 
 function formatBalanceId(balance) {
     return `${balance.substr(8, 4)}…${balance.substr(-4)}`
@@ -46,7 +47,7 @@ function OpSourceAccount({op, compact}) {
 
     if (!op.isEphemeral)
         return accountItem
-    return <> on behalf of account {accountItem}</>
+    return <> for account {accountItem}</>
 }
 
 
@@ -453,13 +454,13 @@ function CreateClaimableBalanceDescriptionView({op, compact}) {
         return <>
             <b>Create claimable balance</b> <Amount amount={amount} asset={AssetDescriptor.parse(asset)} issuer={!compact}/>
             <OpSourceAccount op={op}/>{' '}
-            for claimants <ClaimableBalanceClaimants claimants={claimants}/>
+            claimable by <ClaimableBalanceClaimants claimants={claimants}/>
 
         </>
     return <>
         <OpSourceAccount op={op}/> created claimable balance{' '}
         <Amount amount={amount} asset={AssetDescriptor.parse(asset)} issuer={!compact}/>{' '}
-        for claimants <ClaimableBalanceClaimants claimants={claimants}/>
+        claimable by <ClaimableBalanceClaimants claimants={claimants}/>
     </>
 }
 
@@ -775,18 +776,25 @@ function InvokeHostFunctionView({op, compact}) {
     const value = func.value()
     switch (func.arm()) {
         case 'invokeContract':
-            const invocation = <>
-                <AccountAddress account={xdrParserUtils.xdrParseScVal(value.contractAddress())}/>{' '}
-                <code>{value.functionName().toString()}(<ScVal value={value.args()}/>)</code>
-            </>
+            const contractAddress = xdrParserUtils.xdrParseScVal(value._attributes.contractAddress)
+            const sac = op.operation.sacMap?.[contractAddress]
+            const invocationArgs = {
+                contract: contractAddress,
+                func: value.functionName().toString(),
+                args: value.args(),
+                sac
+            }
             if (op.isEphemeral)
                 return <>
-                    <b>Invoke contract</b> {invocation}<OpSourceAccount op={op}/>
+                    <b>Invoke contract</b> <AccountAddress account={contractAddress}/>{' '}
+                    <InvocationInfoView {...invocationArgs}/>
+                    <OpSourceAccount op={op}/>
                 </>
+            const invocationEffect = op.operation.effects.find(e => e.type === 'contractInvoked' && e.contract === contractAddress)
             return <>
-                <OpSourceAccount op={op}/> invoked contract {invocation}
+                <OpSourceAccount op={op}/> invoked contract <AccountAddress account={contractAddress}/>{' '}
+                <InvocationInfoView {...invocationArgs} result={invocationEffect?.result}/>
             </>
-            break
         case 'wasm':
             const wasmCode = value.toString('base64')
             const codeReference = <>
@@ -800,7 +808,6 @@ function InvokeHostFunctionView({op, compact}) {
             return <>
                 <OpSourceAccount op={op}/> uploaded contract code {codeReference}
             </>
-            break
         case 'createContract':
             const preimage = value.contractIdPreimage()
             const executable = value.executable()

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})
+    const parsedTx = parseTxOperationsMeta({network, tx: txEnvelope, meta, result, protocol, processSystemEvents: true, mapSac: 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

@@ -106,11 +106,11 @@ export const TxOperationsList = React.memo(function TxOperationsList({
                     </div>
                     {!!compact && !op.isEphemeral && <OpAccountingChanges op={op}/>}
                 </div>
-                {effectsExpanded && <OpEffectsView effects={op.operation.effects}/>}
+                {effectsExpanded && <OpEffectsView operation={op}/>}
             </div>)}
             {showFees && <TxChargedFee {...{parsedTx, compact}}/>}
         </div>
         {(opsExpanded || opdiff > 0) && <Spoiler className="text-tiny" expanded={opsExpanded} onChange={toggleAdditionalOps}
-                                                 showMore={`${opdiff} more operation${opdiff > 1 && 's'} in this transaction`} showLess="Hide additional operations"/>}
+                                                 showMore={`${opdiff} more operation${opdiff > 1 ? 's' : ''} in this transaction`} showLess="Hide additional operations"/>}
     </div>
 })