@stellar-expert/ui-framework 1.21.1 → 1.21.2

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.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 {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 './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.js'
+import {AccountAddress} from './account-address'
 
 /**
  * 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.js'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
-import apiCache from './api-cache.js'
+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'
 
 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.js'
-import {useDependantState} from '../state/state-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
-import apiCache from './api-cache.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {useDependantState} from '../state/state-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+import apiCache from './api-cache'
 
 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.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
+import {parseStellarGenericId} from '../stellar/ledger-generic-id'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
 
 /**
  * Load transaction from API

package/api/ledger-stream.js

@@ -1,5 +1,5 @@
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
 
 /**
  * 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.js'
-import {AssetLink} from './asset-link.js'
+import {useAssetMeta} from './asset-meta-hooks'
+import {AssetLink} from './asset-link'
 
 /**
  * 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.js'
-import {useAssetMeta} from './asset-meta-hooks.js'
+import {drawIdenticon} from '../account/identicon'
+import {useAssetMeta} from './asset-meta-hooks'
 
 /**
  * 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.js'
-import {useAssetMeta} from './asset-meta-hooks.js'
+import {AccountAddress} from '../account/account-address'
+import {useAssetMeta} from './asset-meta-hooks'
 
 /**
  * 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.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 {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 './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.js'
-import {useDeepEffect} from '../state/state-hooks.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {useDeepEffect} from '../state/state-hooks'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 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.js'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
  * @typedef AssetBasicTomlInfo

package/asset/asset-selector.js

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

package/charts/axis/axis.js

@@ -1,6 +1,6 @@
-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'
+import {isNumber, pick, relativeLength, defined} from '../core/utilities'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
+import {getLinearTickPositions, niceAlignedTicks, zeroBasedGridTicks, formatAxisNumber, axisNumberUnit} from './tick-positioner'
 
 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.js'
+import {addThousandsSep} from '../core/utilities'
 
 /**
  * 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.js'
+import ChartEngine from './globals'
 
 //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.js'
-import {ChartEngine} from './chart-default-options.js'
+import {merge} from './core/utilities'
+import {ChartEngine} from './chart-default-options'
 
 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.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 {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 './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.js'
+import {uniqueId} from './utilities'
 
 export const DEFAULT_DURATION = 1500
 

package/charts/core/chart.js

@@ -1,16 +1,16 @@
-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'
+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'
 
 const X_LABEL_HEIGHT = 22
 

package/charts/core/options.js

@@ -1,4 +1,4 @@
-import {merge} from './utilities.js'
+import {merge} from './utilities'
 
 //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.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'
+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'
 
 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.js'
-export {ChartEngine, ChartLoader} from './chart.js'
+export {default} from './chart'
+export {ChartEngine, ChartLoader} from './chart'

package/charts/interaction/tooltip.js

@@ -1,5 +1,5 @@
-import {dateFormat} from '../core/time.js'
-import {isNumber, addThousandsSep} from '../core/utilities.js'
+import {dateFormat} from '../core/time'
+import {isNumber, addThousandsSep} from '../core/utilities'
 
 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.js'
-import {animate, DEFAULT_DURATION} from '../core/animate.js'
+import {pick, relativeLength, isNumber, addThousandsSep} from '../core/utilities'
+import {animate, DEFAULT_DURATION} from '../core/animate'
 
 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.js'
-import {animateFromCenter} from '../core/animate.js'
+import {pick, relativeLength} from '../core/utilities'
+import {animateFromCenter} from '../core/animate'
 
 const TEXT_STYLE = {
     fontSize: '12px',

package/charts/series/area-series.js

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

package/charts/series/candlestick-series.js

@@ -1,5 +1,5 @@
-import {isNumber, pick} from '../core/utilities.js'
-import {Series} from './series.js'
+import {isNumber, pick} from '../core/utilities'
+import {Series} from './series'
 
 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.js'
-import {pick, isNumber, clamp} from '../core/utilities.js'
-import {animateColumns} from '../core/animate.js'
+import {Series} from './series'
+import {pick, isNumber, clamp} from '../core/utilities'
+import {animateColumns} from '../core/animate'
 
 export class ColumnSeries extends Series {
     render(group) {

package/charts/series/index.js

@@ -1,7 +1,7 @@
-import {LineSeries} from './line-series.js'
-import {AreaSeries} from './area-series.js'
-import {ColumnSeries} from './column-series.js'
-import {CandlestickSeries} from './candlestick-series.js'
+import {LineSeries} from './line-series'
+import {AreaSeries} from './area-series'
+import {ColumnSeries} from './column-series'
+import {CandlestickSeries} from './candlestick-series'
 
 //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.js'
-import {revealLeftToRight} from '../core/animate.js'
-import {Series} from './series.js'
+import {pick} from '../core/utilities'
+import {revealLeftToRight} from '../core/animate'
+import {Series} from './series'
 
 export class LineSeries extends Series {
     render(group) {

package/charts/series/series.js

@@ -1,4 +1,4 @@
-import {pick, isNumber} from '../core/utilities.js'
+import {pick, isNumber} from '../core/utilities'
 
 //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.js'
+import {isNumber} from '../core/utilities'
 
 const day = 24 * 3600 * 1000
 const week = 7 * day

package/charts/stock/navigator.js

@@ -1,6 +1,6 @@
-import {isNumber, clamp} from '../core/utilities.js'
-import {animateLineDraw} from '../core/animate.js'
-import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time.js'
+import {isNumber, clamp} from '../core/utilities'
+import {animateLineDraw} from '../core/animate'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
 
 //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.js'
+import {isNumber} from '../core/utilities'
 
 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.js'
-import {CodeBlock} from '../controls/code-block.js'
+import {AccountAddress} from '../account/account-address'
+import {CodeBlock} from '../controls/code-block'
 
 /**
  * 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.js'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
 
 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.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {useExplorerApi} from '../api/explorer-api-hooks'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
  * 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.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'
+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'
 
 /**
  * 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.js'
+import {AccountAddress} from '../account/account-address'
 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.js'
+import {useDependantState} from '../state/state-hooks'
 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.js'
+import {Tooltip} from './tooltip'
 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.js'
+import {useDependantState} from '../state/state-hooks'
 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.js'
+import {useDependantState} from '../state/state-hooks'
 import './update-highlighter.scss'
 
 /**

package/date/utc-timestamp.js

@@ -1,29 +1,29 @@
-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.js'
-
-export const UtcTimestamp = React.memo(function UtcTimestamp({date, dateOnly, className}) {
-    let formatted
-    try {
-        date = normalizeDate(date)
-        formatted = formatDateUTC(date)
-        if (dateOnly) {
-            formatted = formatted.split(' ')[0]
-        } else {
-            formatted += ' UTC'
-        }
-    } catch (e) {
-        console.error(e)
-        return null
-    }
-    const localTime = date.toString().replace(/ \(.+\)/, '').replace(/\w+ /, '')
-    return <BlockSelect className={cn('condensed nowrap', className)} title={localTime}>{formatted}</BlockSelect>
-})
-
-UtcTimestamp.propTypes = {
-    date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
-    dateOnly: PropTypes.bool,
-    className: PropTypes.string
+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'
+
+export const UtcTimestamp = React.memo(function UtcTimestamp({date, dateOnly, className}) {
+    let formatted
+    try {
+        date = normalizeDate(date)
+        formatted = formatDateUTC(date)
+        if (dateOnly) {
+            formatted = formatted.split(' ')[0]
+        } else {
+            formatted += ' UTC'
+        }
+    } catch (e) {
+        console.error(e)
+        return null
+    }
+    const localTime = date.toString().replace(/ \(.+\)/, '').replace(/\w+ /, '')
+    return <BlockSelect className={cn('condensed nowrap', className)} title={localTime}>{formatted}</BlockSelect>
+})
+
+UtcTimestamp.propTypes = {
+    date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
+    dateOnly: PropTypes.bool,
+    className: PropTypes.string
 }

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.js'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader.js'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
 
 const cache = new InMemoryClientCache({})