@stellar-expert/ui-framework 1.20.0 → 1.21.1

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

@@ -1,7 +1,7 @@
 import React, {useCallback, useState} from 'react'
-import {StrKey} from '@stellar/stellar-base'
-import {AccountAddress} from '../../account/account-address'
-import {useAutoFocusRef} from '../../interaction/autofocus'
+import {StrKey} from '@stellar/stellar-sdk'
+import {AccountAddress} from '../../account/account-address.js'
+import {useAutoFocusRef} from '../../interaction/autofocus.js'
 
 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'
-import {AssetSelector} from '../../asset/asset-selector'
+import {AssetLink} from '../../asset/asset-link.js'
+import {AssetSelector} from '../../asset/asset-selector.js'
 
 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'
-import {DateSelector} from '../../date/date-selector'
-import {useAutoFocusRef} from '../../interaction/autofocus'
+import {UtcTimestamp} from '../../date/utc-timestamp.js'
+import {DateSelector} from '../../date/date-selector.js'
+import {useAutoFocusRef} from '../../interaction/autofocus.js'
 
 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'
+import {Dropdown} from '../../controls/dropdown.js'
 
 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-base'
+import {StrKey} from '@stellar/stellar-sdk'
 import {shortenString} from '@stellar-expert/formatter'
-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'
+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'
 
 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'
-import {resolveFilterEditor} from './filter-editors'
+import {Dropdown} from '../controls/dropdown.js'
+import {resolveFilterEditor} from './filter-editors.js'
 import './filter.scss'
 
 let fieldDescriptionMapping = {}

package/horizon/horizon-account-helpers.js

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

package/horizon/horizon-ledger-helpers.js

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

package/horizon/horizon-orderbook-helpers.js

@@ -1,5 +1,5 @@
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {applyListQueryParameters, initHorizon} from './horizon-client-helpers'
+import {applyListQueryParameters, initHorizon} from './horizon-client-helpers.js'
 
 /**
  * Load orderbook for assets.

package/horizon/horizon-trades-helper.js

@@ -1,5 +1,5 @@
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers.js'
 
 /**
  * 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'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers.js'
 
 /**
  * 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'
+export * from './module/dynamic-module.js'
 //state management and utils
-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'
+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'
 //explorer API bindings
-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'
+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'
 //Horizon API binding and utils
-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'
+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'
 //basic UI controls
-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'
+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'
 //interaction
-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'
+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'
 //date components
-export * from './date/utc-timestamp'
-export * from './date/elapsed-time'
-export * from './date/date-selector'
+export * from './date/utc-timestamp.js'
+export * from './date/elapsed-time.js'
+export * from './date/date-selector.js'
 //ledger-entries-related components
-export * from './ledger/ledger-entry-link'
-export * from './ledger/ledger-entry-href-formatter'
-export * from './ledger/ledger-info-parser'
+export * from './ledger/ledger-entry-link.js'
+export * from './ledger/ledger-entry-href-formatter.js'
+export * from './ledger/ledger-info-parser.js'
 //account-related components
-export * from './account/identicon'
-export * from './account/account-address'
-export * from './account/signer-key'
-export * from './account/available-balance'
+export * from './account/identicon.js'
+export * from './account/account-address.js'
+export * from './account/signer-key.js'
+export * from './account/available-balance.js'
 //asset-related components
-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'
+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'
 //claimable-balance-related components
-export * from './claimable-balance/claimable-balance-claimants'
+export * from './claimable-balance/claimable-balance-claimants.js'
 //DEX-related components
-export * from './dex/price-dynamic'
+export * from './dex/price-dynamic.js'
 //directory-related components
-export * from './directory/directory-hooks'
+export * from './directory/directory-hooks.js'
 //transaction/operation/effects components
-export * from './tx/tx-operations-list'
-export * from './tx/parser/tx-details-parser'
-export * from './tx/tx-list-hooks'
-export * from './effect/effect-description'
+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'
 //contract-related components
-export * from './contract/contract-api'
+export * from './contract/contract-api.js'
 //filter component
-export * from './filter/filter-view'
+export * from './filter/filter-view.js'
 //Stellar-specific utils
-export * from './stellar/key-type'
-export * from './stellar/signature-hint-utils'
-export * from './contract/sc-val'
+export * from './stellar/key-type.js'
+export * from './stellar/signature-hint-utils.js'
+export * from './contract/sc-val.js'
 //charts
-export {default as Chart, ChartEngine, ChartLoader} from './charts'
+export {default as Chart, ChartEngine, ChartLoader} from './charts/index.js'

package/interaction/system-dialog.js

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

package/interaction/theme-selector.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {useTheme} from '../state/theme'
+import {useTheme} from '../state/theme.js'
 
 /**
  * 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'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
 
 /**
  * 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'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {formatExplorerLink} from './ledger-entry-href-formatter.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks.js'
 
 function LedgerEntryLink({type, id, network, children}) {
     const globallySetNetwork = useStellarNetwork()

package/ledger/ledger-info-parser.js

@@ -1,4 +1,4 @@
-import {xdr} from '@stellar/stellar-base'
+import {xdr} from '@stellar/stellar-sdk'
 
 /**
  * @typedef {Object} LedgerInfo

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'
+import {withErrorBoundary} from '../errors/error-boundary.js'
 
 const loadedModules = new Map()
 

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.20.0",
+  "version": "1.21.1",
   "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",
@@ -13,18 +16,15 @@
     "StellarExpert",
     "UI"
   ],
-  "author": "orbitlens <orbit@stellar.expert>",
-  "license": "MIT",
   "peerDependencies": {
-    "@stellar/stellar-base": "^15.0.0",
-    "@stellar/stellar-sdk": "^15.0.1",
-    "@stellar-expert/asset-descriptor": "^1.5.0",
-    "@stellar-expert/claimable-balance-utils": "^1.4.1",
+    "@stellar/stellar-sdk": "^16.0.0",
+    "@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": "^4.0.0",
-    "@stellar-expert/formatter": "^3.0.0",
+    "@stellar-expert/contract-wasm-interface-parser": "^5.0.0",
+    "@stellar-expert/formatter": "^3.1.0",
     "@stellar-expert/navigation": "^1.1.0",
-    "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
+    "@stellar-expert/tx-meta-effects-parser": "^9.3.0",
     "classnames": ">=2",
     "deepmerge": "^4.3.1",
     "prop-types": ">=15",

package/state/page-visibility-hooks.js

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

package/stellar/key-type.js

@@ -1,4 +1,4 @@
-import {StrKey} from '@stellar/stellar-base'
+import {StrKey} from '@stellar/stellar-sdk'
 
 /**
  * Decode StrKey-encoded Stellar key and determine its type

package/stellar/signature-hint-utils.js

@@ -1,4 +1,4 @@
-import {Keypair} from '@stellar/stellar-base'
+import {Keypair} from '@stellar/stellar-sdk'
 
 /**
  * Convert the signature hint to the StrKey mask

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'
-import Notification from './toast-notification'
+import ToastNotificationInstance from './toast-notification-instance.js'
+import Notification from './toast-notification.js'
 import './toast-notifications.scss'
 
 let notificationsCounter = 0

package/tx/op-accounting-changes.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import {Amount} from '../asset/amount'
-import {retrieveOpBalanceChanges} from './parser/op-balance-changes'
+import {Amount} from '../asset/amount.js'
+import {retrieveOpBalanceChanges} from './parser/op-balance-changes.js'
 
 /**
  * Compact accounting effects (credited/debited amounts)

package/tx/op-description-view.js

@@ -1,21 +1,21 @@
 import React from 'react'
-import {Networks, AuthRequiredFlag, AuthRevocableFlag, AuthClawbackEnabledFlag, AuthImmutableFlag} from '@stellar/stellar-base'
+import {Networks, AuthRequiredFlag, AuthRevocableFlag, AuthClawbackEnabledFlag, AuthImmutableFlag} from '@stellar/stellar-sdk'
 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'
-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'
+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'
 
 /**
  * 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'
-import TxMatcher from './tx-matcher'
+import OperationDescriptor from './op-descriptor.js'
+import TxMatcher from './tx-matcher.js'
 
 /**
  * @typedef {Object} ParsedTxDetails - Parsed transaction

package/tx/parser/tx-matcher.js

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

package/tx/tx-fee-effect.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Amount} from '../asset/amount'
+import {Amount} from '../asset/amount.js'
 import {fromStroops} from '@stellar-expert/formatter'
 
 export default function TxFeeEffect({feeEffect, compact}) {

package/tx/tx-list-hooks.js

@@ -1,5 +1,5 @@
-import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks'
-import {useExplorerApi} from '../api/explorer-api-hooks'
+import {useExplorerPaginatedApi} from '../api/explorer-api-paginated-list-hooks.js'
+import {useExplorerApi} from '../api/explorer-api-hooks.js'
 
 /**
  * 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'
-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 {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 './op-description.scss'
 
 /*