@stellar-expert/ui-framework 1.16.7 → 1.17.0

package/tx/op-description-view.js

@@ -17,15 +17,25 @@ import {useStellarNetwork} from '../state/stellar-network-hooks'
 import InvocationInfoView from '../contract/invocation-info-view'
 import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id'
 
-function getAccountPredefinedDisplayName(address) {
-    if (!window.predefinedAccountDisplayNames)
-        return undefined
-    return window.predefinedAccountDisplayNames[address]
-}
+/**
+ * Detailed operation description within a transaction
+ * @param {OperationDescriptor} op
+ * @param {boolean} [compact]
+ * @constructor
+ */
+export const OpDescriptionView = React.memo(function OpDescriptionView({op, compact = false}) {
+    const render = typeMapping[op.operation.type]
+    if (!render) {
+        console.warn(`No operation text type mapping for operation ${op.operation.type}`)
+        return null
+    }
+    return React.createElement(render, {op, compact})
+})
 
 /**
+ * Renders operation source account
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function OpSourceAccount({op, compact}) {
@@ -48,8 +58,9 @@ function OpSourceAccount({op, compact}) {
 
 
 /**
+ * CreateAccount operation (type 0)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function CreateAccountDescriptionView({op, compact}) {
@@ -65,9 +76,9 @@ function CreateAccountDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 1
+ * Payment operation (type 1)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function PaymentDescriptionView({op, compact}) {
@@ -83,9 +94,9 @@ function PaymentDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 2, 13
+ * Description view for PathPayment operations (types 2, 13)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function PathPaymentDescriptionView({op, compact}) {
@@ -155,9 +166,9 @@ function PathPaymentDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 3, 4, 12
+ * Description view for ManageSellOffer/ManageBuyOffer/CreatePassiveSellOffer operations (types 3, 4, 12)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ManageOfferDescriptionView({op, compact}) {
@@ -232,9 +243,9 @@ function AccountFlags({flags}) {
 }
 
 /**
- * Type: 5
+ * SetOptions operation (type 5)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function SetOptionsDescriptionView({op, compact}) {
@@ -305,9 +316,9 @@ function SetOptionsDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 6
+ * ChangeTrust operation (type 6)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ChangeTrustDescriptionView({op, compact}) {
@@ -338,9 +349,9 @@ function ChangeTrustDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 7
+ * AllowTrust operation (type 7)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function AllowTrustDescriptionView({op, compact}) {
@@ -360,9 +371,9 @@ function AllowTrustDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 8
+ * AccountMerge operation (type 8)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function MergeAccountDescriptionView({op, compact}) {
@@ -378,9 +389,9 @@ function MergeAccountDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 9
+ * Inflation operation (type 9)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function InflationDescriptionView({op, compact}) {
@@ -394,9 +405,9 @@ function InflationDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 10
+ * ManageData operation (type 10)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ManageDataDescriptionView({op, compact}) {
@@ -422,9 +433,9 @@ function ManageDataDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 11
+ * BumpSequence operation (type 11)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function BumpSequenceDescriptionView({op, compact}) {
@@ -439,9 +450,9 @@ function BumpSequenceDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 14
+ * CreateClaimableBalance operation (type 14)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function CreateClaimableBalanceDescriptionView({op, compact}) {
@@ -464,9 +475,9 @@ function CreateClaimableBalanceDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 15
+ * ClaimClaimableBalance operation (type 15)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ClaimClaimableBalanceDescriptionView({op, compact}) {
@@ -482,9 +493,9 @@ function ClaimClaimableBalanceDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 16
+ * BeginSponsoringFutureReserves operation (type 16)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function BeginSponsoringFutureReservesDescriptionView({op, compact}) {
@@ -499,9 +510,9 @@ function BeginSponsoringFutureReservesDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 17
+ * EndSponsoringFutureReserves operation (type 17)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function EndSponsoringFutureReservesDescriptionView({op, compact}) {
@@ -515,9 +526,9 @@ function EndSponsoringFutureReservesDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeAccountSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeAccountSponsorshipDescriptionView({op, compact}) {
@@ -532,9 +543,9 @@ function RevokeAccountSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeSignerSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeSignerSponsorshipDescriptionView({op, compact}) {
@@ -552,9 +563,9 @@ function RevokeSignerSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeTrustlineSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeTrustlineSponsorshipDescriptionView({op, compact}) {
@@ -571,9 +582,9 @@ function RevokeTrustlineSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeOfferSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeOfferSponsorshipDescriptionView({op, compact}) {
@@ -590,9 +601,9 @@ function RevokeOfferSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeDataSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeDataSponsorshipDescriptionView({op, compact}) {
@@ -609,9 +620,9 @@ function RevokeDataSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeClaimableBalanceSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeClaimableBalanceSponsorshipDescriptionView({op, compact}) {
@@ -627,9 +638,9 @@ function RevokeClaimableBalanceSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 18
+ * RevokeLiquidityPoolSponsorship operation (type 18)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RevokeLiquidityPoolSponsorshipDescriptionView({op, compact}) {
@@ -645,9 +656,9 @@ function RevokeLiquidityPoolSponsorshipDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 19
+ * Clawback operation (type 19)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ClawbackDescriptionView({op, compact}) {
@@ -664,9 +675,9 @@ function ClawbackDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 20
+ * ClawbackClaimableBalance operation (type 20)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ClawbackClaimableBalanceDescriptionView({op, compact}) {
@@ -681,9 +692,9 @@ function ClawbackClaimableBalanceDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 21
+ * SetTrustLineFlags operation (type 21)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function SetTrustLineFlagsDescriptionView({op, compact}) {
@@ -714,9 +725,9 @@ function SetTrustLineFlagsDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 22
+ * LiquidityPoolDeposit operation (type 22)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function DepositLiquidityDescriptionView({op, compact}) {
@@ -739,9 +750,9 @@ function DepositLiquidityDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 23
+ * LiquidityPoolWithdraw operation (type 23)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function WithdrawLiquidityDescriptionView({op, compact}) {
@@ -764,9 +775,9 @@ function WithdrawLiquidityDescriptionView({op, compact}) {
 }
 
 /**
- * Type: 24
+ * InvokeHostFunction operation (type 24) — Soroban contract calls
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function InvokeHostFunctionView({op, compact}) {
@@ -856,9 +867,9 @@ function InvokeHostFunctionView({op, compact}) {
 }
 
 /**
- * Type: 25
+ * ExtendFootprintTTL operation (type 25)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function ExtendFootprintTTLView({op}) {
@@ -874,9 +885,9 @@ function ExtendFootprintTTLView({op}) {
 }
 
 /**
- * Type: 26
+ * RestoreFootprint operation (type 26)
  * @param {OperationDescriptor} op
- * @param {Boolean} compact
+ * @param {boolean} compact
  * @constructor
  */
 function RestoreFootprintView({op}) {
@@ -890,6 +901,13 @@ function RestoreFootprintView({op}) {
     </>
 }
 
+
+function getAccountPredefinedDisplayName(address) {
+    if (!window.predefinedAccountDisplayNames)
+        return undefined
+    return window.predefinedAccountDisplayNames[address]
+}
+
 const typeMapping = {
     createAccount: CreateAccountDescriptionView,
     payment: PaymentDescriptionView,
@@ -924,19 +942,4 @@ const typeMapping = {
     invokeHostFunction: InvokeHostFunctionView,
     extendFootprintTtl: ExtendFootprintTTLView,
     restoreFootprint: RestoreFootprintView
-}
-
-/**
- * Text description of a tx operation
- * @param {OperationDescriptor} op
- * @param {Boolean} [compact]
- * @constructor
- */
-export const OpDescriptionView = React.memo(function OpDescriptionView({op, compact = false}) {
-    const render = typeMapping[op.operation.type]
-    if (!render) {
-        console.warn(`No operation text type mapping for operation ${op.operation.type}`)
-        return null
-    }
-    return React.createElement(render, {op, compact})
-})
+}

package/tx/op-icon.js

@@ -1,99 +1,99 @@
-import React from 'react'
-import cn from 'classnames'
-
-const opIconMapping = {
-    feeCharge: 'send-circle',
-    createAccount: 'hexagon-add',
-    payment: 'send-circle',
-    paymentReceive: 'receive-circle',
-    pathPaymentStrictReceive: 'swap',
-    manageSellOffer: 'dex-offer',
-    createPassiveSellOffer: 'dex-offer',
-    setOptions: 'hexagon-set-options',
-    changeTrust: 'trustlines',
-    changeTrustAdd: 'create-trustline',
-    changeTrustRemove: 'remove-trustline',
-    changeTrustUpdate: 'trustline-flags',
-    allowTrust: 'trustline-flags',
-    accountMerge: 'hexagon-remove',
-    accountMergeReceive: 'receive-circle',
-    inflation: 'hexagon-inflation',
-    manageData: 'grid',
-    manageDataAdd: 'grid-add',
-    manageDataRemove: 'grid-remove',
-    bumpSequence: 'upload',
-    manageBuyOffer: 'dex-offer',
-    pathPaymentStrictSend: 'swap',
-    createClaimableBalance: 'shutdown-circle',
-    claimClaimableBalance: 'icon-ok',
-    claimClaimableBalanceReceive: 'receive-circle',
-    beginSponsoringFutureReserves: 'sponsor',
-    endSponsoringFutureReserves: 'sponsor',
-    revoke: 'revoke',
-    revokeAccountSponsorship: 'revoke',
-    revokeTrustlineSponsorship: 'revoke',
-    revokeOfferSponsorship: 'revoke',
-    revokeDataSponsorship: 'revoke',
-    revokeClaimableBalanceSponsorship: 'revoke',
-    revokeLiquidityPoolSponsorship: 'revoke',
-    revokeSignerSponsorship: 'revoke',
-    clawback: 'clawback',
-    clawbackReceive: 'send-circle',
-    clawbackClaimableBalance: 'icon-ok',
-    setTrustLineFlags: 'trustline-flags',
-    liquidityPoolDeposit: 'droplet',
-    liquidityPoolWithdraw: 'droplet-half',
-    invokeHostFunction: 'flash',
-    extendFootprintTtl: 'upload',
-    restoreFootprint: 'upload'
-}
-
-/**
- * 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, failed = false}) {
-    let type
-    let title
-    if (op === 'feeCharge') {
-        type = 'feeCharge'
-        title = 'Transaction fees charge'
-    } else {
-        const {operation} = op
-        title = type = operation.type
-        title = title[0].toUpperCase() + title.substring(1) + ' operation'
-        switch (type) {
-            case 'payment':
-            case 'accountMerge':
-            case 'claimClaimableBalance':
-            case 'clawback':
-                if (!op.context?.account?.includes(operation.source)) {
-                    type += 'Receive'
-                }
-                break
-            case 'manageData':
-                if (operation.effects.some(e => e.type === 'dataEntryCreated')) {
-                    type += 'Add'
-                } else if (operation.effects.some(e => e.type === 'dataEntryRemoved')) {
-                    type += 'Remove'
-                }
-                break
-            case 'changeTrust':
-                if (operation.limit > 0) {
-                    type += 'Add'
-                } else {
-                    type += 'Remove'
-                }
-                break
-        }
-    }
-    if (failed) {
-        title += ' - Transaction failed'
-    }
-    const icon = opIconMapping[type]
-    return <div className={cn('op-icon', {failed})} title={title}>
-        <i className={`icon-${icon}`}/>
-    </div>
+import React from 'react'
+import cn from 'classnames'
+
+const opIconMapping = {
+    feeCharge: 'send-circle',
+    createAccount: 'hexagon-add',
+    payment: 'send-circle',
+    paymentReceive: 'receive-circle',
+    pathPaymentStrictReceive: 'swap',
+    manageSellOffer: 'dex-offer',
+    createPassiveSellOffer: 'dex-offer',
+    setOptions: 'hexagon-set-options',
+    changeTrust: 'trustlines',
+    changeTrustAdd: 'create-trustline',
+    changeTrustRemove: 'remove-trustline',
+    changeTrustUpdate: 'trustline-flags',
+    allowTrust: 'trustline-flags',
+    accountMerge: 'hexagon-remove',
+    accountMergeReceive: 'receive-circle',
+    inflation: 'hexagon-inflation',
+    manageData: 'grid',
+    manageDataAdd: 'grid-add',
+    manageDataRemove: 'grid-remove',
+    bumpSequence: 'upload',
+    manageBuyOffer: 'dex-offer',
+    pathPaymentStrictSend: 'swap',
+    createClaimableBalance: 'shutdown-circle',
+    claimClaimableBalance: 'icon-ok',
+    claimClaimableBalanceReceive: 'receive-circle',
+    beginSponsoringFutureReserves: 'sponsor',
+    endSponsoringFutureReserves: 'sponsor',
+    revoke: 'revoke',
+    revokeAccountSponsorship: 'revoke',
+    revokeTrustlineSponsorship: 'revoke',
+    revokeOfferSponsorship: 'revoke',
+    revokeDataSponsorship: 'revoke',
+    revokeClaimableBalanceSponsorship: 'revoke',
+    revokeLiquidityPoolSponsorship: 'revoke',
+    revokeSignerSponsorship: 'revoke',
+    clawback: 'clawback',
+    clawbackReceive: 'send-circle',
+    clawbackClaimableBalance: 'icon-ok',
+    setTrustLineFlags: 'trustline-flags',
+    liquidityPoolDeposit: 'droplet',
+    liquidityPoolWithdraw: 'droplet-half',
+    invokeHostFunction: 'flash',
+    extendFootprintTtl: 'upload',
+    restoreFootprint: 'upload'
+}
+
+/**
+ * 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, failed = false}) {
+    let type
+    let title
+    if (op === 'feeCharge') {
+        type = 'feeCharge'
+        title = 'Transaction fees charge'
+    } else {
+        const {operation} = op
+        title = type = operation.type
+        title = title[0].toUpperCase() + title.substring(1) + ' operation'
+        switch (type) {
+            case 'payment':
+            case 'accountMerge':
+            case 'claimClaimableBalance':
+            case 'clawback':
+                if (!op.context?.account?.includes(operation.source)) {
+                    type += 'Receive'
+                }
+                break
+            case 'manageData':
+                if (operation.effects.some(e => e.type === 'dataEntryCreated')) {
+                    type += 'Add'
+                } else if (operation.effects.some(e => e.type === 'dataEntryRemoved')) {
+                    type += 'Remove'
+                }
+                break
+            case 'changeTrust':
+                if (operation.limit > 0) {
+                    type += 'Add'
+                } else {
+                    type += 'Remove'
+                }
+                break
+        }
+    }
+    if (failed) {
+        title += ' - Transaction failed'
+    }
+    const icon = opIconMapping[type]
+    return <div className={cn('op-icon', {failed})} title={title}>
+        <i className={`icon-${icon}`}/>
+    </div>
 })