@stellar-expert/ui-framework 1.21.1 → 1.21.3

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.3",
   "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

package/tx/parser/tx-details-parser.js

@@ -1,6 +1,6 @@
 import {parseTxOperationsMeta} from '@stellar-expert/tx-meta-effects-parser'
-import OperationDescriptor from './op-descriptor.js'
-import TxMatcher from './tx-matcher.js'
+import OperationDescriptor from './op-descriptor'
+import TxMatcher from './tx-matcher'
 
 /**
  * @typedef {Object} ParsedTxDetails - Parsed transaction

package/tx/parser/tx-matcher.js

@@ -1,6 +1,6 @@
 import {LiquidityPoolAsset} from '@stellar/stellar-sdk'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {TypeFilterMatcher} from './type-filter-matcher.js'
+import {TypeFilterMatcher} from './type-filter-matcher'
 
 export default class TxMatcher {
     constructor(filters, skipUnrelated = false) {

package/tx/tx-fee-effect.js

@@ -1,14 +1,14 @@
-import React from 'react'
-import {Amount} from '../asset/amount.js'
-import {fromStroops} from '@stellar-expert/formatter'
-
-export default function TxFeeEffect({feeEffect, compact}) {
-    const {charged, bid, bump} = feeEffect
-    if (charged)
-        return <div>
-            <Amount amount={fromStroops(charged)} asset="XLM" issuer={!compact}/> transaction {!!bump && 'bump'} fee charged
-        </div>
-    return <div>
-        Charge transaction {!!bump && 'bump'} fee <Amount amount={fromStroops(bid)} asset="XLM" issuer={!compact}/>
-    </div>
+import React from 'react'
+import {Amount} from '../asset/amount'
+import {fromStroops} from '@stellar-expert/formatter'
+
+export default function TxFeeEffect({feeEffect, compact}) {
+    const {charged, bid, bump} = feeEffect
+    if (charged)
+        return <div>
+            <Amount amount={fromStroops(charged)} asset="XLM" issuer={!compact}/> transaction {!!bump && 'bump'} fee charged
+        </div>
+    return <div>
+        Charge transaction {!!bump && 'bump'} fee <Amount amount={fromStroops(bid)} asset="XLM" issuer={!compact}/>
+    </div>
 }

package/tx/tx-list-hooks.js

@@ -1,5 +1,5 @@
-import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks.js'
-import {useExplorerApi} from '../api/explorer-api-hooks.js'
+import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks'
+import {useExplorerApi} from '../api/explorer-api-hooks'
 
 /**
  * React hook that fetches paginated transaction history from the Explorer API

package/tx/tx-operations-list.js

@@ -1,10 +1,10 @@
 import React, {useCallback, useState} from 'react'
-import {Spoiler} from '../interaction/spoiler.js'
-import {OpEffectsView} from '../effect/op-effects-view.js'
-import {OpAccountingChanges, TxFeeAccountingChanges} from './op-accounting-changes.js'
-import TxFeeEffect from './tx-fee-effect.js'
-import {OpDescriptionView} from './op-description-view.js'
-import {OpIcon} from './op-icon.js'
+import {Spoiler} from '../interaction/spoiler'
+import {OpEffectsView} from '../effect/op-effects-view'
+import {OpAccountingChanges, TxFeeAccountingChanges} from './op-accounting-changes'
+import TxFeeEffect from './tx-fee-effect'
+import {OpDescriptionView} from './op-description-view'
+import {OpIcon} from './op-icon'
 import './op-description.scss'
 
 /*