@stellar-expert/ui-framework 1.21.1 → 1.21.3

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({})
 

package/effect/effect-description.js

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

package/effect/op-effects-view.js

@@ -1,58 +1,58 @@
-import React from 'react'
-import cn from 'classnames'
-import {EffectDescription} from './effect-description.js'
-import SorobanTxMetricsView from './soroban-tx-metrics-view.js'
-import './op-effects.scss'
-
-export function OpEffectsView({operation}) {
-    const effects = getEffects(operation)
-    if (!effects.length)
-        return <div className="op-effects">
-            <div className="dimmed">(no effects)</div>
-        </div>
-    return <div className="op-effects">
-        {effects.map((e, i) => {
-            if (e.type === 'contractMetrics')
-                return null
-            return <div key={i}>
-                <i className={cn('effect-icon', e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle')}/>&thinsp;
-                <EffectDescription effect={e} operation={operation}/>
-            </div>
-        })}
-        <SorobanTxMetricsView metrics={effects.find(e => e.type === 'contractMetrics')}/>
-    </div>
-}
-
-function getEffects(op) {
-    let {effects} = op.operation
-    if (op.operation.type === 'invokeHostFunction')
-        return sortContractEffects([...effects])
-    return effects
-}
-
-function sortContractEffects(effects) {
-    effects.sort((a, b) => {
-        const aInvocation = a.type === 'contractInvoked'
-        const bInvocation = b.type === 'contractInvoked'
-        if (aInvocation && bInvocation)
-            return 0
-        if (!aInvocation && !bInvocation) {
-            const aData = a.type === 'setTtl' || a.type.startsWith('contractData')
-            const bData = b.type === 'setTtl' || b.type.startsWith('contractData')
-            if (aData === bData) {
-                if (a.type === 'setTtl')
-                    return 1
-                if (b.type === 'setTtl')
-                    return -1
-                if (a.durability === 'instance' && a.durability !== b.durability)
-                    return -1
-                if (b.durability === 'instance' && a.durability !== b.durability)
-                    return 1
-                return 0
-            }
-            return aData ? 1 : -1
-        }
-        return aInvocation ? -1 : 1
-    })
-    return effects
+import React from 'react'
+import cn from 'classnames'
+import {EffectDescription} from './effect-description'
+import SorobanTxMetricsView from './soroban-tx-metrics-view'
+import './op-effects.scss'
+
+export function OpEffectsView({operation}) {
+    const effects = getEffects(operation)
+    if (!effects.length)
+        return <div className="op-effects">
+            <div className="dimmed">(no effects)</div>
+        </div>
+    return <div className="op-effects">
+        {effects.map((e, i) => {
+            if (e.type === 'contractMetrics')
+                return null
+            return <div key={i}>
+                <i className={cn('effect-icon', e.type === 'contractError' ? 'icon-warning' : 'icon-puzzle')}/>&thinsp;
+                <EffectDescription effect={e} operation={operation}/>
+            </div>
+        })}
+        <SorobanTxMetricsView metrics={effects.find(e => e.type === 'contractMetrics')}/>
+    </div>
+}
+
+function getEffects(op) {
+    let {effects} = op.operation
+    if (op.operation.type === 'invokeHostFunction')
+        return sortContractEffects([...effects])
+    return effects
+}
+
+function sortContractEffects(effects) {
+    effects.sort((a, b) => {
+        const aInvocation = a.type === 'contractInvoked'
+        const bInvocation = b.type === 'contractInvoked'
+        if (aInvocation && bInvocation)
+            return 0
+        if (!aInvocation && !bInvocation) {
+            const aData = a.type === 'setTtl' || a.type.startsWith('contractData')
+            const bData = b.type === 'setTtl' || b.type.startsWith('contractData')
+            if (aData === bData) {
+                if (a.type === 'setTtl')
+                    return 1
+                if (b.type === 'setTtl')
+                    return -1
+                if (a.durability === 'instance' && a.durability !== b.durability)
+                    return -1
+                if (b.durability === 'instance' && a.durability !== b.durability)
+                    return 1
+                return 0
+            }
+            return aData ? 1 : -1
+        }
+        return aInvocation ? -1 : 1
+    })
+    return effects
 }

package/errors/error-boundary.js

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

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

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

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

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

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

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

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

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

package/filter/filter-editors.js

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

package/filter/filter-view.js

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

package/horizon/horizon-account-helpers.js

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

package/horizon/horizon-ledger-helpers.js

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

package/horizon/horizon-orderbook-helpers.js

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

package/horizon/horizon-trades-helper.js

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

package/horizon/horizon-transaction-helpers.js

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

package/index.js

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

package/interaction/system-dialog.js

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

package/interaction/theme-selector.js

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

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

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