@stellar-expert/ui-framework 1.15.3 → 1.15.4

package/claimable-balance/claimable-balance-claimants.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import {xdrParseClaimant} from '@stellar-expert/claimable-balance-utils'
 import {AccountAddress} from '../account/account-address'
+import {CodeBlock} from '../controls/code-block'
 
 export const ClaimableBalanceClaimants = React.memo(function ClaimableBalanceClaimants({claimants}) {
-    const parsed = claimants.map(xdrParseClaimant)
+    const parsed = claimants.map(c => {
+        if (c.destination && c.predicate)
+            return c
+        return xdrParseClaimant(c)
+    })
     return <>
         {parsed.map((c, i) => <span key={i + c.destination}>{i > 0 && ', '}
-            <AccountAddress account={c.destination}/> {c.predicate}
+            <AccountAddress account={c.destination}/> {typeof c.predicate === 'string' ?
+                c.predicate :
+                <div className="block-indent"><CodeBlock>{JSON.stringify(c.predicate, null, 2)}</CodeBlock></div>}
         </span>)}
     </>
 })

package/claimable-balance/claimable-balance-id.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import {shortenString} from '@stellar-expert/formatter'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
+
+export function ClaimableBalanceId({balance}) {
+    if (!balance)
+        return null
+    return <>{' '}
+        <a href={formatExplorerLink('claimable-balance', balance)} target="_blank">
+            {shortenString(balance)}
+        </a>
+    </>
+}

package/effect/effect-description.js

@@ -7,6 +7,7 @@ import {AccountAddress} from '../account/account-address'
 import {SignerKey} from '../account/signer-key'
 import {OfferLink, PoolLink} from '../ledger/ledger-entry-link'
 import {AssetLink} from '../asset/asset-link'
+import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id'
 import {Amount} from '../asset/amount'
 import {CopyToClipboard} from '../interaction/copy-to-clipboard'
 import {ScVal} from '../contract/sc-val'
@@ -107,12 +108,12 @@ export function EffectDescription({effect, operation}) {
         case 'claimableBalanceCreated':
             return <>
                 Account <AccountAddress account={effect.source}/> created claimable
-                balance <ClaimableBalance effect={effect}/> <Amount asset={effect.asset} amount={effect.amount} adjust/>
+                balance <ClaimableBalanceId balance={effect.balance}/> <Amount asset={effect.asset} amount={effect.amount} adjust/>
             </>
         case 'claimableBalanceRemoved':
             return <>
                 Account <AccountAddress account={effect.source}/> claimed claimable
-                balance <ClaimableBalance effect={effect}/> <Amount asset={effect.asset} amount={effect.amount} adjust/>
+                balance <ClaimableBalanceId balance={effect.balance}/> <Amount asset={effect.asset} amount={effect.amount} adjust/>
             </>
         case 'accountSponsorshipCreated':
         case 'accountSponsorshipUpdated':
@@ -161,13 +162,14 @@ export function EffectDescription({effect, operation}) {
         case 'claimableBalanceSponsorshipCreated':
         case 'claimableBalanceSponsorshipUpdated':
             return <>
-                Account <AccountAddress account={effect.sponsor}/> sponsored claimable balance <ClaimableBalance effect={effect}/>
+                Account <AccountAddress account={effect.sponsor}/> sponsored
+                claimable balance <ClaimableBalanceId balance={effect.balance}/>
                 {effect.source !== effect.sponsor && <> for account <AccountAddress account={effect.source}/></>}
             </>
         case 'claimableBalanceSponsorshipRemoved':
             return <>
                 Account <AccountAddress account={effect.prevSponsor}/> revoked claimable
-                balance <ClaimableBalance effect={effect}/> sponsorship
+                balance <ClaimableBalanceId balance={effect.balance}/> sponsorship
                 {effect.source !== effect.prevSponsor && <> for account <AccountAddress account={effect.source}/></>}
             </>
         case 'signerSponsorshipCreated':
@@ -327,15 +329,6 @@ function ContractCodeWasm({wasm}) {
     </>
 }
 
-function ClaimableBalance({effect}) {
-    const {balance} = effect
-    return <>
-        {shortenString(balance)} <CopyToClipboard text={balance}/>{/*<InfoTooltip icon="icon-plus">
-            <CopyToClipboard text={balance}>{balance}</CopyToClipboard>
-        </InfoTooltip>*/}
-    </>
-}
-
 function LedgerKeyHint({effect, children}) {
     if (!effect.keyHash)
         return children

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'|'contract'} type
+ * @param {'account'|'asset'|'ledger'|'tx'|'op'|'offer'|'contract'|'liquidity-pool'|'claimable-balance'} type
  * @param {String|Number} id
  * @param {String} [network]
  * @return {String}

package/package.json

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

package/tx/op-description-view.js

@@ -14,12 +14,8 @@ import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
 import {ClaimableBalanceClaimants} from '../claimable-balance/claimable-balance-claimants'
 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)}`
-}
+import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id'
 
 function getAccountPredefinedDisplayName(address) {
     if (!window.predefinedAccountDisplayNames)
@@ -449,16 +445,19 @@ function BumpSequenceDescriptionView({op, compact}) {
  * @constructor
  */
 function CreateClaimableBalanceDescriptionView({op, compact}) {
-    const {asset, amount, claimants} = op.operation
+    const {asset, amount, claimants, effects} = op.operation
+    const balanceId = effects.find(e => e.type === 'claimableBalanceCreated')?.balance
     if (op.isEphemeral)
         return <>
             <b>Create claimable balance</b> <Amount amount={amount} asset={AssetDescriptor.parse(asset)} issuer={!compact}/>
+            <ClaimableBalanceId balance={balanceId}/>
             <OpSourceAccount op={op}/>{' '}
             claimable by <ClaimableBalanceClaimants claimants={claimants}/>
 
         </>
     return <>
-        <OpSourceAccount op={op}/> created claimable balance{' '}
+        <OpSourceAccount op={op}/> created claimable balance
+        <ClaimableBalanceId balance={balanceId}/>{' '}
         <Amount amount={amount} asset={AssetDescriptor.parse(asset)} issuer={!compact}/>{' '}
         claimable by <ClaimableBalanceClaimants claimants={claimants}/>
     </>
@@ -474,11 +473,11 @@ function ClaimClaimableBalanceDescriptionView({op, compact}) {
     const {balanceId} = op.operation
     if (op.isEphemeral)
         return <>
-            <b>Claim balance</b> <code>{formatBalanceId(balanceId)}</code>
+            <b>Claim balance</b> <ClaimableBalanceId balance={balanceId}/>
             <OpSourceAccount op={op}/>
         </>
     return <>
-        <OpSourceAccount op={op}/> claimed balance <code>{formatBalanceId(balanceId)}</code>
+        <OpSourceAccount op={op}/> claimed balance <ClaimableBalanceId balance={balanceId}/>
     </>
 }
 
@@ -619,11 +618,11 @@ function RevokeClaimableBalanceSponsorshipDescriptionView({op, compact}) {
     const {balanceId} = op.operation
     if (op.isEphemeral)
         return <>
-            <b>Revoke sponsorship</b> on claimable balance <code>{formatBalanceId(balanceId)}</code>
+            <b>Revoke sponsorship</b> on claimable balance <ClaimableBalanceId balance={balanceId}/>
             <OpSourceAccount op={op}/>
         </>
     return <>
-        <OpSourceAccount op={op}/> revoked sponsorship on claimable balance <code>{formatBalanceId(balanceId)}</code>
+        <OpSourceAccount op={op}/> revoked sponsorship on claimable balance <ClaimableBalanceId balance={balanceId}/>
     </>
 }
 
@@ -674,10 +673,10 @@ function ClawbackClaimableBalanceDescriptionView({op, compact}) {
     const {balanceId} = op.operation
     if (op.isEphemeral)
         return <>
-            <b>Clawback claimable balance</b> <code>{formatBalanceId(balanceId)}</code><OpSourceAccount op={op}/>
+            <b>Clawback claimable balance</b> <ClaimableBalanceId balance={balanceId}/><OpSourceAccount op={op}/>
         </>
     return <>
-        <OpSourceAccount op={op}/> clawedback claimable balance <code>{formatBalanceId(balanceId)}</code>
+        <OpSourceAccount op={op}/> clawedback claimable balance <ClaimableBalanceId balance={balanceId}/>
     </>
 }