@stellar-expert/ui-framework 1.21.1 → 1.21.2

package/effect/effect-description.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types'
 import {AuthRequiredFlag, AuthRevocableFlag, AuthImmutableFlag, AuthClawbackEnabledFlag} from '@stellar/stellar-sdk'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
 import {shortenString, formatWithAutoPrecision} from '@stellar-expert/formatter'
-import {CopyToClipboard} from '../interaction/copy-to-clipboard.js'
-import {AccountAddress} from '../account/account-address.js'
-import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id.js'
-import InvocationInfoView from '../contract/invocation-info-view.js'
-import {ScVal} from '../contract/sc-val.js'
-import {SignerKey} from '../account/signer-key.js'
-import {OfferLink} from '../ledger/ledger-entry-link.js'
-import {AssetLink} from '../asset/asset-link.js'
-import {Amount} from '../asset/amount.js'
+import {CopyToClipboard} from '../interaction/copy-to-clipboard'
+import {AccountAddress} from '../account/account-address'
+import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id'
+import InvocationInfoView from '../contract/invocation-info-view'
+import {ScVal} from '../contract/sc-val'
+import {SignerKey} from '../account/signer-key'
+import {OfferLink} from '../ledger/ledger-entry-link'
+import {AssetLink} from '../asset/asset-link'
+import {Amount} from '../asset/amount'
 
 /**
  * Renders a human-readable description of a Stellar transaction effect

package/effect/op-effects-view.js

@@ -1,58 +1,58 @@
-import React from 'react'
-import cn from 'classnames'
-import {EffectDescription} from './effect-description.js'
-import SorobanTxMetricsView from './soroban-tx-metrics-view.js'
-import './op-effects.scss'
-
-export function OpEffectsView({operation}) {
-    const effects = getEffects(operation)
-    if (!effects.length)
-        return <div className="op-effects">
-            <div className="dimmed">(no effects)</div>
-        </div>
-    return <div className="op-effects">
-        {effects.map((e, i) => {
-            if (e.type === 'contractMetrics')
-                return null
-            return <div key={i}>
-                <i className={cn('effect-icon', e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle')}/>&thinsp;
-                <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 === '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
-    })
-    return effects
+import React from 'react'
+import cn from 'classnames'
+import {EffectDescription} from './effect-description'
+import SorobanTxMetricsView from './soroban-tx-metrics-view'
+import './op-effects.scss'
+
+export function OpEffectsView({operation}) {
+    const effects = getEffects(operation)
+    if (!effects.length)
+        return <div className="op-effects">
+            <div className="dimmed">(no effects)</div>
+        </div>
+    return <div className="op-effects">
+        {effects.map((e, i) => {
+            if (e.type === 'contractMetrics')
+                return null
+            return <div key={i}>
+                <i className={cn('effect-icon', e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle')}/>&thinsp;
+                <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 === '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
+    })
+    return effects
 }

package/errors/error-boundary.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {navigation as nav} from '@stellar-expert/navigation'
-import {BlockSelect} from '../interaction/block-select.js'
+import {BlockSelect} from '../interaction/block-select'
 
 /**
  * React error boundary that catches rendering errors and displays a fallback UI

package/filter/editors/account-filter-view.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useState} from 'react'
 import {StrKey} from '@stellar/stellar-sdk'
-import {AccountAddress} from '../../account/account-address.js'
-import {useAutoFocusRef} from '../../interaction/autofocus.js'
+import {AccountAddress} from '../../account/account-address'
+import {useAutoFocusRef} from '../../interaction/autofocus'
 
 export function AccountEditor({value, setValue}) {
     const [internalValue, setInternalValue] = useState(value || '')

package/filter/editors/asset-filter-view.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import {AssetLink} from '../../asset/asset-link.js'
-import {AssetSelector} from '../../asset/asset-selector.js'
+import {AssetLink} from '../../asset/asset-link'
+import {AssetSelector} from '../../asset/asset-selector'
 
 export function AssetEditor({value, setValue}) {
     if (!setValue)

package/filter/editors/timestamp-filter-view.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useState} from 'react'
-import {UtcTimestamp} from '../../date/utc-timestamp.js'
-import {DateSelector} from '../../date/date-selector.js'
-import {useAutoFocusRef} from '../../interaction/autofocus.js'
+import {UtcTimestamp} from '../../date/utc-timestamp'
+import {DateSelector} from '../../date/date-selector'
+import {useAutoFocusRef} from '../../interaction/autofocus'
 
 export function TimestampEditor({value, setValue, edit}) {
     value = parseInt(value, 10)

package/filter/editors/type-filter-view.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dropdown} from '../../controls/dropdown.js'
+import {Dropdown} from '../../controls/dropdown'
 
 export function OperationTypeEditor({value, setValue}) {
     if (!setValue) {

package/filter/filter-editors.js

@@ -1,12 +1,12 @@
 import React, {useCallback, useState} from 'react'
 import {StrKey} from '@stellar/stellar-sdk'
 import {shortenString} from '@stellar-expert/formatter'
-import {AssetLink} from '../asset/asset-link.js'
-import {useAutoFocusRef} from '../interaction/autofocus.js'
-import {OperationTypeEditor} from './editors/type-filter-view.js'
-import {AssetEditor} from './editors/asset-filter-view.js'
-import {AccountEditor} from './editors/account-filter-view.js'
-import {TimestampEditor} from './editors/timestamp-filter-view.js'
+import {AssetLink} from '../asset/asset-link'
+import {useAutoFocusRef} from '../interaction/autofocus'
+import {OperationTypeEditor} from './editors/type-filter-view'
+import {AssetEditor} from './editors/asset-filter-view'
+import {AccountEditor} from './editors/account-filter-view'
+import {TimestampEditor} from './editors/timestamp-filter-view'
 
 export function TextEditor({value, setValue, mask}) {
     const [internalValue, setInternalValue] = useState(value || '')

package/filter/filter-view.js

@@ -1,8 +1,8 @@
 import React, {useCallback, useEffect, useState} from 'react'
 import {navigation, parseQuery} from '@stellar-expert/navigation'
 import deepmerge from 'deepmerge'
-import {Dropdown} from '../controls/dropdown.js'
-import {resolveFilterEditor} from './filter-editors.js'
+import {Dropdown} from '../controls/dropdown'
+import {resolveFilterEditor} from './filter-editors'
 import './filter.scss'
 
 let fieldDescriptionMapping = {}

package/horizon/horizon-account-helpers.js

@@ -1,4 +1,4 @@
-import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers.js'
+import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
 
 /**
  * Retrieve account status from Horizon

package/horizon/horizon-ledger-helpers.js

@@ -1,4 +1,4 @@
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers.js'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
 
 /**
  * Load ledgers from Horizon

package/horizon/horizon-orderbook-helpers.js

@@ -1,14 +1,14 @@
-import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {applyListQueryParameters, initHorizon} from './horizon-client-helpers.js'
-
-/**
- * Load orderbook for assets.
- * @param {object} selling - Selling asset.
- * @param {object} buying - Buying asset.
- * @param {ListQueryParams} [queryParams] - Query parameters (optional).
- * @return {Promise<Array<object>>}
- */
-export function loadOrderbook(selling, buying, queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().orderbook(AssetDescriptor.parse(selling).toAsset(), AssetDescriptor.parse(buying).toAsset()), queryParams)
-    return query.call()
-}
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {applyListQueryParameters, initHorizon} from './horizon-client-helpers'
+
+/**
+ * Load orderbook for assets.
+ * @param {object} selling - Selling asset.
+ * @param {object} buying - Buying asset.
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional).
+ * @return {Promise<Array<object>>}
+ */
+export function loadOrderbook(selling, buying, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().orderbook(AssetDescriptor.parse(selling).toAsset(), AssetDescriptor.parse(buying).toAsset()), queryParams)
+    return query.call()
+}

package/horizon/horizon-trades-helper.js

@@ -1,5 +1,5 @@
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers.js'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
 
 /**
  * Load offer from Horizon for the particular account

package/horizon/horizon-transaction-helpers.js

@@ -1,4 +1,4 @@
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers.js'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
 
 /**
  * Load transactions from Horizon

package/index.js

@@ -5,93 +5,93 @@ window.explorerApiOrigin = window.explorerApiOrigin || 'https://api.stellar.expe
 window.horizonOrigin = window.horizonOrigin || 'https://horizon.stellar.org'
 
 //modules
-export * from './module/dynamic-module.js'
+export * from './module/dynamic-module'
 //state management and utils
-export * from './state/state-hooks.js'
-export * from './state/on-screen-hooks.js'
-export * from './state/stellar-network-hooks.js'
-export * from './state/screen-orientation-hooks.js'
-export * from './state/page-visibility-helpers.js'
-export * from './state/theme.js'
-export * from './meta/page-meta-tags.js'
+export * from './state/state-hooks'
+export * from './state/on-screen-hooks'
+export * from './state/stellar-network-hooks'
+export * from './state/screen-orientation-hooks'
+export * from './state/page-visibility-helpers'
+export * from './state/theme'
+export * from './meta/page-meta-tags'
 //explorer API bindings
-export * from './api/explorer-api-hooks.js'
-export * from './api/explorer-api-paginated-list-hooks.js'
-export * from './api/explorer-tx-api.js'
-export * from './api/explorer-batch-info-loader.js'
-export * from './api/ledger-stream.js'
+export * from './api/explorer-api-hooks'
+export * from './api/explorer-api-paginated-list-hooks'
+export * from './api/explorer-tx-api'
+export * from './api/explorer-batch-info-loader'
+export * from './api/ledger-stream'
 //Horizon API binding and utils
-export * from './stellar/ledger-generic-id.js'
-export * from './horizon/horizon-client-helpers.js'
-export * from './horizon/horizon-ledger-helpers.js'
-export * from './horizon/horizon-transaction-helpers.js'
-export * from './horizon/horizon-account-helpers.js'
-export * from './horizon/horizon-orderbook-helpers.js'
-export * from './horizon/horizon-trades-helper.js'
+export * from './stellar/ledger-generic-id'
+export * from './horizon/horizon-client-helpers'
+export * from './horizon/horizon-ledger-helpers'
+export * from './horizon/horizon-transaction-helpers'
+export * from './horizon/horizon-account-helpers'
+export * from './horizon/horizon-orderbook-helpers'
+export * from './horizon/horizon-trades-helper'
 //basic UI controls
-export * from './controls/button.js'
-export * from './controls/button-group.js'
-export * from './controls/info-tooltip.js'
-export * from './controls/tooltip.js'
-export * from './controls/update-highlighter.js'
-export * from './controls/tabs.js'
-export * from './controls/dropdown.js'
-export * from './controls/code-block.js'
-export * from './controls/slider.js'
-export * from './controls/external-link.js'
-export * from './toast/toast-notifications-block.js'
-export * from './errors/error-boundary.js'
+export * from './controls/button'
+export * from './controls/button-group'
+export * from './controls/info-tooltip'
+export * from './controls/tooltip'
+export * from './controls/update-highlighter'
+export * from './controls/tabs'
+export * from './controls/dropdown'
+export * from './controls/code-block'
+export * from './controls/slider'
+export * from './controls/external-link'
+export * from './toast/toast-notifications-block'
+export * from './errors/error-boundary'
 //interaction
-export * from './interaction/autofocus.js'
-export * from './interaction/block-select.js'
-export * from './interaction/copy-to-clipboard.js'
-export * from './interaction/spoiler.js'
-export * from './interaction/accordion.js'
-export * from './interaction/theme-selector.js'
-export * from './interaction/inline-progress.js'
-export * from './interaction/responsive.js'
-export * from './interaction/qr-code.js'
-export * from './interaction/dialog.js'
-export * from './interaction/system-dialog.js'
+export * from './interaction/autofocus'
+export * from './interaction/block-select'
+export * from './interaction/copy-to-clipboard'
+export * from './interaction/spoiler'
+export * from './interaction/accordion'
+export * from './interaction/theme-selector'
+export * from './interaction/inline-progress'
+export * from './interaction/responsive'
+export * from './interaction/qr-code'
+export * from './interaction/dialog'
+export * from './interaction/system-dialog'
 //date components
-export * from './date/utc-timestamp.js'
-export * from './date/elapsed-time.js'
-export * from './date/date-selector.js'
+export * from './date/utc-timestamp'
+export * from './date/elapsed-time'
+export * from './date/date-selector'
 //ledger-entries-related components
-export * from './ledger/ledger-entry-link.js'
-export * from './ledger/ledger-entry-href-formatter.js'
-export * from './ledger/ledger-info-parser.js'
+export * from './ledger/ledger-entry-link'
+export * from './ledger/ledger-entry-href-formatter'
+export * from './ledger/ledger-info-parser'
 //account-related components
-export * from './account/identicon.js'
-export * from './account/account-address.js'
-export * from './account/signer-key.js'
-export * from './account/available-balance.js'
+export * from './account/identicon'
+export * from './account/account-address'
+export * from './account/signer-key'
+export * from './account/available-balance'
 //asset-related components
-export * from './asset/asset-link.js'
-export * from './asset/asset-issuer.js'
-export * from './asset/asset-icon.js'
-export * from './asset/asset-selector.js'
-export * from './asset/amount.js'
-export * from './asset/asset-meta-hooks.js'
-export * from './asset/asset-list-hooks.js'
+export * from './asset/asset-link'
+export * from './asset/asset-issuer'
+export * from './asset/asset-icon'
+export * from './asset/asset-selector'
+export * from './asset/amount'
+export * from './asset/asset-meta-hooks'
+export * from './asset/asset-list-hooks'
 //claimable-balance-related components
-export * from './claimable-balance/claimable-balance-claimants.js'
+export * from './claimable-balance/claimable-balance-claimants'
 //DEX-related components
-export * from './dex/price-dynamic.js'
+export * from './dex/price-dynamic'
 //directory-related components
-export * from './directory/directory-hooks.js'
+export * from './directory/directory-hooks'
 //transaction/operation/effects components
-export * from './tx/tx-operations-list.js'
-export * from './tx/parser/tx-details-parser.js'
-export * from './tx/tx-list-hooks.js'
-export * from './effect/effect-description.js'
+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.js'
+export * from './contract/contract-api'
 //filter component
-export * from './filter/filter-view.js'
+export * from './filter/filter-view'
 //Stellar-specific utils
-export * from './stellar/key-type.js'
-export * from './stellar/signature-hint-utils.js'
-export * from './contract/sc-val.js'
+export * from './stellar/key-type'
+export * from './stellar/signature-hint-utils'
+export * from './contract/sc-val'
 //charts
-export {default as Chart, ChartEngine, ChartLoader} from './charts/index.js'
+export {default as Chart, ChartEngine, ChartLoader} from './charts'

package/interaction/system-dialog.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react'
-import {Button} from '../controls/button.js'
-import {Dialog} from './dialog.js'
+import {Button} from '../controls/button'
+import {Dialog} from './dialog'
 
 const defaultConfirmCaption = 'Confirm'
 const defaultCancelCaption = 'Cancel'

package/interaction/theme-selector.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {useTheme} from '../state/theme.js'
+import {useTheme} from '../state/theme'
 
 /**
  * Theme toggle button that switches between day (light) and night (dark) themes

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

@@ -1,4 +1,4 @@
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
  * Build URL path to StellarExpert explorer page for given ledger entry

package/ledger/ledger-entry-link.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {formatExplorerLink} from './ledger-entry-href-formatter.js'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
+import {formatExplorerLink} from './ledger-entry-href-formatter'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
 
 function LedgerEntryLink({type, id, network, children}) {
     const globallySetNetwork = useStellarNetwork()

package/module/dynamic-module.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
-import {withErrorBoundary} from '../errors/error-boundary.js'
+import {withErrorBoundary} from '../errors/error-boundary'
 
 const loadedModules = new Map()
 

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.21.1",
+  "version": "1.21.2",
   "description": "StellarExpert shared UI components library",
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",
-  "type": "module",
   "main": "index.js",
   "module": "./index.js",
   "types": "index.d.ts",
@@ -21,7 +20,7 @@
     "@stellar-expert/asset-descriptor": "^2.0.0",
     "@stellar-expert/claimable-balance-utils": "^2.0.0",
     "@stellar-expert/client-cache": "^1.1.0",
-    "@stellar-expert/contract-wasm-interface-parser": "^5.0.0",
+    "@stellar-expert/contract-wasm-interface-parser": "^5.0.1",
     "@stellar-expert/formatter": "^3.1.0",
     "@stellar-expert/navigation": "^1.1.0",
     "@stellar-expert/tx-meta-effects-parser": "^9.3.0",

package/state/page-visibility-hooks.js

@@ -1,5 +1,5 @@
 import {useState, useEffect} from 'react'
-import {isDocumentVisible, addVisibilityChangeListener, isDocumentVisibilitySupported} from './page-visibility-helpers.js'
+import {isDocumentVisible, addVisibilityChangeListener, isDocumentVisibilitySupported} from './page-visibility-helpers'
 
 /**
  * Hook that tracks whether the current browser tab/page is visible

package/toast/toast-notifications-block.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useState} from 'react'
 import {render} from 'react-dom'
-import ToastNotificationInstance from './toast-notification-instance.js'
-import Notification from './toast-notification.js'
+import ToastNotificationInstance from './toast-notification-instance'
+import Notification from './toast-notification'
 import './toast-notifications.scss'
 
 let notificationsCounter = 0

package/tx/op-accounting-changes.js

@@ -1,27 +1,27 @@
-import React from 'react'
-import {Amount} from '../asset/amount.js'
-import {retrieveOpBalanceChanges} from './parser/op-balance-changes.js'
-
-/**
- * Compact accounting effects (credited/debited amounts)
- * @param {OperationDescriptor} op
- * @constructor
- */
-export function OpAccountingChanges({op}) {
-    const changes = retrieveOpBalanceChanges(op)
-    return <div className="accounting-effects condensed">
-        {changes.map((ch, i) => <div key={op.txHash + op.order + i}
-                                     className={ch.type === 'accountDebited' ? 'dimmed' : 'color-success'}>
-            {ch.type === 'accountDebited' ? '-' : '+'}
-            <Amount amount={ch.amount} asset={ch.asset} issuer={false} icon={false} adjust/>
-        </div>)}
-    </div>
-}
-
-export function TxFeeAccountingChanges({amount}) {
-    return <div className="accounting-effects condensed">
-        <div className="dimmed">
-            -<Amount amount={amount} asset="XLM" issuer={false} icon={false} adjust/>
-        </div>
-    </div>
+import React from 'react'
+import {Amount} from '../asset/amount'
+import {retrieveOpBalanceChanges} from './parser/op-balance-changes'
+
+/**
+ * Compact accounting effects (credited/debited amounts)
+ * @param {OperationDescriptor} op
+ * @constructor
+ */
+export function OpAccountingChanges({op}) {
+    const changes = retrieveOpBalanceChanges(op)
+    return <div className="accounting-effects condensed">
+        {changes.map((ch, i) => <div key={op.txHash + op.order + i}
+                                     className={ch.type === 'accountDebited' ? 'dimmed' : 'color-success'}>
+            {ch.type === 'accountDebited' ? '-' : '+'}
+            <Amount amount={ch.amount} asset={ch.asset} issuer={false} icon={false} adjust/>
+        </div>)}
+    </div>
+}
+
+export function TxFeeAccountingChanges({amount}) {
+    return <div className="accounting-effects condensed">
+        <div className="dimmed">
+            -<Amount amount={amount} asset="XLM" issuer={false} icon={false} adjust/>
+        </div>
+    </div>
 }

package/tx/op-description-view.js

@@ -3,19 +3,19 @@ import {Networks, AuthRequiredFlag, AuthRevocableFlag, AuthClawbackEnabledFlag,
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
 import {formatPrice, formatWithAutoPrecision, fromStroops, toStroops, shortenString} from '@stellar-expert/formatter'
 import {xdrParserUtils, contractPreimageEncoder} from '@stellar-expert/tx-meta-effects-parser'
-import {AccountAddress} from '../account/account-address.js'
-import {AccountIdenticon} from '../account/identicon.js'
-import {SignerKey} from '../account/signer-key.js'
-import {Amount} from '../asset/amount.js'
-import {AssetLink} from '../asset/asset-link.js'
-import {useAssetMeta} from '../asset/asset-meta-hooks.js'
-import {OfferLink} from '../ledger/ledger-entry-link.js'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
-import {ClaimableBalanceClaimants} from '../claimable-balance/claimable-balance-claimants.js'
-import {CopyToClipboard} from '../interaction/copy-to-clipboard.js'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import InvocationInfoView from '../contract/invocation-info-view.js'
-import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id.js'
+import {AccountAddress} from '../account/account-address'
+import {AccountIdenticon} from '../account/identicon'
+import {SignerKey} from '../account/signer-key'
+import {Amount} from '../asset/amount'
+import {AssetLink} from '../asset/asset-link'
+import {useAssetMeta} from '../asset/asset-meta-hooks'
+import {OfferLink} from '../ledger/ledger-entry-link'
+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 InvocationInfoView from '../contract/invocation-info-view'
+import {ClaimableBalanceId} from '../claimable-balance/claimable-balance-id'
 
 /**
  * Detailed operation description within a transaction