@stellar-expert/ui-framework 1.21.0 → 1.21.1

package/account/account-address.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import cn from 'classnames'
 import {shortenString} from '@stellar-expert/formatter'
-import {AccountIdenticon} from './identicon'
-import {InfoTooltip} from '../controls/info-tooltip'
-import {useDirectory} from '../directory/directory-hooks'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
-import {decodeKeyType} from '../stellar/key-type'
+import {AccountIdenticon} from './identicon.js'
+import {InfoTooltip} from '../controls/info-tooltip.js'
+import {useDirectory} from '../directory/directory-hooks.js'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks.js'
+import {decodeKeyType} from '../stellar/key-type.js'
 import './account-address.scss'
 
 

package/account/signer-key.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StrKey} from '@stellar/stellar-sdk'
-import {AccountAddress} from './account-address'
+import {AccountAddress} from './account-address.js'
 
 /**
  * Decode a Stellar signer object (XDR or parsed) into a StrKey-encoded key and weight

package/api/explorer-api-hooks.js

@@ -1,10 +1,10 @@
 import {useEffect, useState} from 'react'
 import isEqual from 'react-fast-compare'
 import {stringifyQuery} from '@stellar-expert/navigation'
-import {addVisibilityChangeListener, isDocumentVisible} from '../state/page-visibility-helpers'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
-import {fetchExplorerApi} from './explorer-api-call'
-import apiCache from './api-cache'
+import {addVisibilityChangeListener, isDocumentVisible} from '../state/page-visibility-helpers.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from './explorer-api-call.js'
+import apiCache from './api-cache.js'
 
 export class ExplorerApiResult {
     constructor(apiEndpoint, data, ts) {

package/api/explorer-api-paginated-list-hooks.js

@@ -1,10 +1,10 @@
 import {useRef} from 'react'
 import isEqual from 'react-fast-compare'
 import {parseQuery, stringifyQuery, navigation} from '@stellar-expert/navigation'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
-import {useDependantState} from '../state/state-hooks'
-import {fetchExplorerApi} from './explorer-api-call'
-import apiCache from './api-cache'
+import {useStellarNetwork} from '../state/stellar-network-hooks.js'
+import {useDependantState} from '../state/state-hooks.js'
+import {fetchExplorerApi} from './explorer-api-call.js'
+import apiCache from './api-cache.js'
 
 function inverseOrder(order) {
     return order === 'desc' ? 'asc' : 'desc'

package/api/explorer-tx-api.js

@@ -1,6 +1,6 @@
-import {parseStellarGenericId} from '../stellar/ledger-generic-id'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
-import {fetchExplorerApi} from './explorer-api-call'
+import {parseStellarGenericId} from '../stellar/ledger-generic-id.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from './explorer-api-call.js'
 
 /**
  * Load transaction from API

package/api/ledger-stream.js

@@ -1,5 +1,5 @@
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
-import {fetchExplorerApi} from './explorer-api-call'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from './explorer-api-call.js'
 
 /**
  * Long-polling stream that notifies listeners about new ledgers

package/asset/amount.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import {formatWithPrecision, formatWithAutoPrecision, fromStroops} from '@stellar-expert/formatter'
 import {AssetDescriptor, isAssetValid, isValidPoolId} from '@stellar-expert/asset-descriptor'
-import {useAssetMeta} from './asset-meta-hooks'
-import {AssetLink} from './asset-link'
+import {useAssetMeta} from './asset-meta-hooks.js'
+import {AssetLink} from './asset-link.js'
 
 /**
  * Formatted tokens amount

package/asset/asset-icon.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {drawIdenticon} from '../account/identicon'
-import {useAssetMeta} from './asset-meta-hooks'
+import {drawIdenticon} from '../account/identicon.js'
+import {useAssetMeta} from './asset-meta-hooks.js'
 
 /**
  * Inline asset icon

package/asset/asset-issuer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {AccountAddress} from '../account/account-address'
-import {useAssetMeta} from './asset-meta-hooks'
+import {AccountAddress} from '../account/account-address.js'
+import {useAssetMeta} from './asset-meta-hooks.js'
 
 /**
  * Inline asset issuer

package/asset/asset-link.js

@@ -2,12 +2,12 @@ import React from 'react'
 import cn from 'classnames'
 import {shortenString} from '@stellar-expert/formatter'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {useStellarNetwork} from '../state/stellar-network-hooks'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
-import {AccountAddress} from '../account/account-address'
-import {useAssetMeta} from './asset-meta-hooks'
-import {AssetIcon} from './asset-icon'
-import {AssetIssuer} from './asset-issuer'
+import {useStellarNetwork} from '../state/stellar-network-hooks.js'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
+import {AccountAddress} from '../account/account-address.js'
+import {useAssetMeta} from './asset-meta-hooks.js'
+import {AssetIcon} from './asset-icon.js'
+import {AssetIssuer} from './asset-issuer.js'
 import './asset-link.scss'
 
 /**

package/asset/asset-list-hooks.js

@@ -2,9 +2,9 @@ import React, {useState} from 'react'
 import {throttle} from 'throttle-debounce'
 import equal from 'react-fast-compare'
 import {stringifyQuery} from '@stellar-expert/navigation'
-import {fetchExplorerApi} from '../api/explorer-api-call'
-import {useDeepEffect} from '../state/state-hooks'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from '../api/explorer-api-call.js'
+import {useDeepEffect} from '../state/state-hooks.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
 
 const defaults = {
     limit: 20,

package/asset/asset-meta-hooks.js

@@ -2,9 +2,9 @@ import {useEffect, useState} from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
 import {stringifyQuery} from '@stellar-expert/navigation'
 import {InMemoryClientCache} from '@stellar-expert/client-cache'
-import {fetchExplorerApi} from '../api/explorer-api-call'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from '../api/explorer-api-call.js'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
 
 /**
  * @typedef AssetBasicTomlInfo

package/asset/asset-selector.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useRef, useState} from 'react'
-import {Dropdown} from '../controls/dropdown'
-import {AssetLink} from './asset-link'
-import {useAssetList} from './asset-list-hooks'
+import {Dropdown} from '../controls/dropdown.js'
+import {AssetLink} from './asset-link.js'
+import {useAssetList} from './asset-list-hooks.js'
 import './asset-selector.scss'
 
 /**

package/charts/axis/axis.js

@@ -1,6 +1,6 @@
-import {isNumber, pick, relativeLength, defined} from '../core/utilities'
-import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
-import {getLinearTickPositions, niceAlignedTicks, zeroBasedGridTicks, formatAxisNumber, axisNumberUnit} from './tick-positioner'
+import {isNumber, pick, relativeLength, defined} from '../core/utilities.js'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time.js'
+import {getLinearTickPositions, niceAlignedTicks, zeroBasedGridTicks, formatAxisNumber, axisNumberUnit} from './tick-positioner.js'
 
 const LABEL_FONT = 12
 const LABEL_FONT_CSS = LABEL_FONT + 'px "Roboto Condensed",sans-serif'

package/charts/axis/tick-positioner.js

@@ -1,5 +1,5 @@
 //Linear "nice number" tick interval + positions.
-import {addThousandsSep} from '../core/utilities'
+import {addThousandsSep} from '../core/utilities.js'
 
 /**
  * Round an interval to a human-friendly value (1, 2, 2.5, 5, 10 * 10^n).

package/charts/chart-default-options.js

@@ -1,6 +1,6 @@
 //StellarExpert explorer chart theme — colors, fonts and per-type defaults applied on top of the
 //engine baseline via setOptions, plus the custom logarithmic axis scaling used by balance/distribution charts.
-import ChartEngine from './globals'
+import ChartEngine from './globals.js'
 
 //allow negative values on the logarithmic axis
 ChartEngine.Axis.prototype.allowNegativeLog = true

package/charts/chart-options-builder.js

@@ -1,7 +1,7 @@
 //Normalizes per-chart options before they reach the engine: applies grouping/range/legend flags and
 //registers optional engine modules. Uses the engine's own merge (no deepmerge dependency).
-import {merge} from './core/utilities'
-import {ChartEngine} from './chart-default-options'
+import {merge} from './core/utilities.js'
+import {ChartEngine} from './chart-default-options.js'
 
 const rangeSelectorOptions = {
     //the in-house range selector renders span controls styled via chart.scss (.chart-zoom-btn);

package/charts/chart.js

@@ -1,11 +1,11 @@
 import React, {useRef} from 'react'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
-import {useDeepEffect} from '../state/state-hooks'
-import {withErrorBoundary} from '../errors/error-boundary'
-import {ChartEngine} from './chart-default-options'
-import {prepareChartOptions} from './chart-options-builder'
-import {ChartLoader} from './chart-loader'
+import {useDeepEffect} from '../state/state-hooks.js'
+import {withErrorBoundary} from '../errors/error-boundary.js'
+import {ChartEngine} from './chart-default-options.js'
+import {prepareChartOptions} from './chart-options-builder.js'
+import {ChartLoader} from './chart-loader.js'
 import './chart.scss'
 
 export {ChartEngine, ChartLoader}

package/charts/core/animate.js

@@ -1,6 +1,6 @@
 //Load/draw animations for the initial chart render (a per-series-type entrance).
 //Only runs once, on first paint — redraws (zoom, legend toggle, resize) skip it.
-import {uniqueId} from './utilities'
+import {uniqueId} from './utilities.js'
 
 export const DEFAULT_DURATION = 1500
 

package/charts/core/chart.js

@@ -1,16 +1,16 @@
-import {Axis} from '../axis/axis'
-import {niceAlignedTicks} from '../axis/tick-positioner'
-import {createSeries} from '../series'
-import {Legend} from '../interaction/legend'
-import {Tooltip} from '../interaction/tooltip'
-import {groupSeriesData} from '../stock/data-grouping'
-import {RangeSelector} from '../stock/range-selector'
-import {renderPolar} from '../polar/polar-chart'
-import {renderPie} from '../pie/pie-chart'
-import {Navigator} from '../stock/navigator'
-import {merge, resolveContainer, pick, relativeLength, uniqueId, defined, isNumber} from './utilities'
-import {getOptions} from './options'
-import {SvgRenderer} from './svg-renderer'
+import {Axis} from '../axis/axis.js'
+import {niceAlignedTicks} from '../axis/tick-positioner.js'
+import {createSeries} from '../series/index.js'
+import {Legend} from '../interaction/legend.js'
+import {Tooltip} from '../interaction/tooltip.js'
+import {groupSeriesData} from '../stock/data-grouping.js'
+import {RangeSelector} from '../stock/range-selector.js'
+import {renderPolar} from '../polar/polar-chart.js'
+import {renderPie} from '../pie/pie-chart.js'
+import {Navigator} from '../stock/navigator.js'
+import {merge, resolveContainer, pick, relativeLength, uniqueId, defined, isNumber} from './utilities.js'
+import {getOptions} from './options.js'
+import {SvgRenderer} from './svg-renderer.js'
 
 const X_LABEL_HEIGHT = 22
 

package/charts/core/options.js

@@ -1,4 +1,4 @@
-import {merge} from './utilities'
+import {merge} from './utilities.js'
 
 //Engine baseline defaults. The explorer theme (applied via setOptions in chart-default-options.js)
 //deep-merges on top of this, and per-chart options on top of that.

package/charts/globals.js

@@ -1,10 +1,10 @@
 //The engine namespace exposed to consumers and to the theme/options-builder — the small public
 //surface (chart constructors, options, Color, Axis, merge) that views and modules touch.
-import {Chart} from './core/chart'
-import {getOptions, setOptions} from './core/options'
-import {Color} from './core/color'
-import {Axis} from './axis/axis'
-import {merge} from './core/utilities'
+import {Chart} from './core/chart.js'
+import {getOptions, setOptions} from './core/options.js'
+import {Color} from './core/color.js'
+import {Axis} from './axis/axis.js'
+import {merge} from './core/utilities.js'
 
 function ChartCtor(renderTo, options) {
     return new Chart(renderTo, options, 'Chart')

package/charts/index.js

@@ -1,4 +1,4 @@
 //Pure-JS SVG charting library — public entry point.
 //Props: options/type/title/grouped/range/noLegend/inline/modules/children.
-export {default} from './chart'
-export {ChartEngine, ChartLoader} from './chart'
+export {default} from './chart.js'
+export {ChartEngine, ChartLoader} from './chart.js'

package/charts/interaction/tooltip.js

@@ -1,5 +1,5 @@
-import {dateFormat} from '../core/time'
-import {isNumber, addThousandsSep} from '../core/utilities'
+import {dateFormat} from '../core/time.js'
+import {isNumber, addThousandsSep} from '../core/utilities.js'
 
 function formatValue(v, tooltipOpts) {
     if (!isNumber(v))

package/charts/pie/pie-chart.js

@@ -1,7 +1,7 @@
 //Pie / variable-pie rendering path (contract users chart).
 //variable-pie: slice ANGLE scales with y, slice OUTER RADIUS scales with z.
-import {pick, relativeLength, isNumber, addThousandsSep} from '../core/utilities'
-import {animate, DEFAULT_DURATION} from '../core/animate'
+import {pick, relativeLength, isNumber, addThousandsSep} from '../core/utilities.js'
+import {animate, DEFAULT_DURATION} from '../core/animate.js'
 
 const TEXT_STYLE = {
     fontSize: '12px',

package/charts/polar/polar-chart.js

@@ -1,7 +1,7 @@
 //Polar/radar rendering path (asset rating chart): categories around a circle, radial value axis,
 //polygon gridlines (gridLineInterpolation: 'polygon').
-import {pick, relativeLength} from '../core/utilities'
-import {animateFromCenter} from '../core/animate'
+import {pick, relativeLength} from '../core/utilities.js'
+import {animateFromCenter} from '../core/animate.js'
 
 const TEXT_STYLE = {
     fontSize: '12px',

package/charts/series/area-series.js

@@ -1,6 +1,6 @@
-import {pick, uniqueId, isNumber, clamp} from '../core/utilities'
-import {revealLeftToRight} from '../core/animate'
-import {LineSeries} from './line-series'
+import {pick, uniqueId, isNumber, clamp} from '../core/utilities.js'
+import {revealLeftToRight} from '../core/animate.js'
+import {LineSeries} from './line-series.js'
 
 export class AreaSeries extends LineSeries {
     resolveFill() {

package/charts/series/candlestick-series.js

@@ -1,5 +1,5 @@
-import {isNumber, pick} from '../core/utilities'
-import {Series} from './series'
+import {isNumber, pick} from '../core/utilities.js'
+import {Series} from './series.js'
 
 export class CandlestickSeries extends Series {
     //candlesticks plot OHLC, not a single y; expose extremes from high/low for the axis

package/charts/series/column-series.js

@@ -1,6 +1,6 @@
-import {Series} from './series'
-import {pick, isNumber, clamp} from '../core/utilities'
-import {animateColumns} from '../core/animate'
+import {Series} from './series.js'
+import {pick, isNumber, clamp} from '../core/utilities.js'
+import {animateColumns} from '../core/animate.js'
 
 export class ColumnSeries extends Series {
     render(group) {

package/charts/series/index.js

@@ -1,7 +1,7 @@
-import {LineSeries} from './line-series'
-import {AreaSeries} from './area-series'
-import {ColumnSeries} from './column-series'
-import {CandlestickSeries} from './candlestick-series'
+import {LineSeries} from './line-series.js'
+import {AreaSeries} from './area-series.js'
+import {ColumnSeries} from './column-series.js'
+import {CandlestickSeries} from './candlestick-series.js'
 
 //series type registry — extended in later phases (spline-smoothing, candlestick, variablepie, ...)
 export const seriesTypes = {

package/charts/series/line-series.js

@@ -1,6 +1,6 @@
-import {pick} from '../core/utilities'
-import {revealLeftToRight} from '../core/animate'
-import {Series} from './series'
+import {pick} from '../core/utilities.js'
+import {revealLeftToRight} from '../core/animate.js'
+import {Series} from './series.js'
 
 export class LineSeries extends Series {
     render(group) {

package/charts/series/series.js

@@ -1,4 +1,4 @@
-import {pick, isNumber} from '../core/utilities'
+import {pick, isNumber} from '../core/utilities.js'
 
 //Catmull-Rom -> cubic bezier smoothing for spline series
 function smoothSegmentPath(pts) {

package/charts/stock/data-grouping.js

@@ -1,5 +1,5 @@
 //Downsample raw series points into calendar-aligned time buckets (stock data grouping).
-import {isNumber} from '../core/utilities'
+import {isNumber} from '../core/utilities.js'
 
 const day = 24 * 3600 * 1000
 const week = 7 * day

package/charts/stock/navigator.js

@@ -1,6 +1,6 @@
-import {isNumber, clamp} from '../core/utilities'
-import {animateLineDraw} from '../core/animate'
-import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
+import {isNumber, clamp} from '../core/utilities.js'
+import {animateLineDraw} from '../core/animate.js'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time.js'
 
 //Navigator look: a thin red overview line, the SELECTED window masked with a light fill,
 //a light outline, and small grip handles centred vertically on each edge.

package/charts/stock/range-selector.js

@@ -1,4 +1,4 @@
-import {isNumber} from '../core/utilities'
+import {isNumber} from '../core/utilities.js'
 
 const DAY = 24 * 3600 * 1000
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import {xdrParseClaimant} from '@stellar-expert/claimable-balance-utils'
-import {AccountAddress} from '../account/account-address'
-import {CodeBlock} from '../controls/code-block'
+import {AccountAddress} from '../account/account-address.js'
+import {CodeBlock} from '../controls/code-block.js'
 
 /**
  * Displays a list of claimable balance claimants with their addresses and predicates

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import {shortenString} from '@stellar-expert/formatter'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
 
 export function ClaimableBalanceId({balance}) {
     if (!balance)

package/contract/contract-api.js

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
-import {useExplorerApi} from '../api/explorer-api-hooks'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {useExplorerApi} from '../api/explorer-api-hooks.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
 
 /**
  * React hook that fetches contract information from the Explorer API

package/contract/invocation-info-view.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import {parseContractMetadata} from '@stellar-expert/contract-wasm-interface-parser'
 import {shortenString} from '@stellar-expert/formatter'
-import {AccountAddress} from '../account/account-address'
-import {AssetLink} from '../asset/asset-link'
-import {Tooltip} from '../controls/tooltip'
-import {parseScValValue, primitiveTypes, ScVal, ScValStruct} from './sc-val'
-import {useContractSource} from './contract-api'
-import {sacInterface} from './sac-interface'
+import {AccountAddress} from '../account/account-address.js'
+import {AssetLink} from '../asset/asset-link.js'
+import {Tooltip} from '../controls/tooltip.js'
+import {parseScValValue, primitiveTypes, ScVal, ScValStruct} from './sc-val.js'
+import {useContractSource} from './contract-api.js'
+import {sacInterface} from './sac-interface.js'
 
 /**
  * Basic Soroban contract invocation info

package/contract/sc-val.js

@@ -3,7 +3,7 @@ import cn from 'classnames'
 import {xdr, scValToBigInt} from '@stellar/stellar-sdk'
 import {xdrParserUtils} from '@stellar-expert/tx-meta-effects-parser'
 import {shortenString} from '@stellar-expert/formatter'
-import {AccountAddress} from '../account/account-address'
+import {AccountAddress} from '../account/account-address.js'
 import './sc-val.scss'
 
 /**

package/controls/dropdown.js

@@ -3,7 +3,7 @@ import {createPortal} from 'react-dom'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import {throttle} from 'throttle-debounce'
-import {useDependantState} from '../state/state-hooks'
+import {useDependantState} from '../state/state-hooks.js'
 import './dropdown.scss'
 
 /**

package/controls/info-tooltip.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
-import {Tooltip} from './tooltip'
+import {Tooltip} from './tooltip.js'
 import './info-tooltip.scss'
 
 /**

package/controls/tabs.js

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react'
 import cn from 'classnames'
 import {navigation} from '@stellar-expert/navigation'
-import {useDependantState} from '../state/state-hooks'
+import {useDependantState} from '../state/state-hooks.js'
 import './tabs.scss'
 
 /**

package/controls/update-highlighter.js

@@ -1,7 +1,7 @@
 import React, {useRef} from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
-import {useDependantState} from '../state/state-hooks'
+import {useDependantState} from '../state/state-hooks.js'
 import './update-highlighter.scss'
 
 /**

package/date/utc-timestamp.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import {normalizeDate, formatDateUTC} from '@stellar-expert/formatter'
-import {BlockSelect} from '../interaction/block-select'
+import {BlockSelect} from '../interaction/block-select.js'
 
 export const UtcTimestamp = React.memo(function UtcTimestamp({date, dateOnly, className}) {
     let formatted

package/directory/directory-hooks.js

@@ -2,8 +2,8 @@ import {useEffect, useState} from 'react'
 import {StrKey} from '@stellar/stellar-sdk'
 import {stringifyQuery} from '@stellar-expert/navigation'
 import {InMemoryClientCache} from '@stellar-expert/client-cache'
-import {fetchExplorerApi} from '../api/explorer-api-call'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
+import {fetchExplorerApi} from '../api/explorer-api-call.js'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader.js'
 
 const cache = new InMemoryClientCache({})
 

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'
-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'
+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'
 
 /**
  * Renders a human-readable description of a Stellar transaction effect

package/effect/op-effects-view.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import cn from 'classnames'
-import {EffectDescription} from './effect-description'
-import SorobanTxMetricsView from './soroban-tx-metrics-view'
+import {EffectDescription} from './effect-description.js'
+import SorobanTxMetricsView from './soroban-tx-metrics-view.js'
 import './op-effects.scss'
 
 export function OpEffectsView({operation}) {

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'
+import {BlockSelect} from '../interaction/block-select.js'
 
 /**
  * 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'
-import {useAutoFocusRef} from '../../interaction/autofocus'
+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-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/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,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "StellarExpert shared UI components library",
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",

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/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

@@ -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'
-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-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'
 
 /*