@stellar-expert/ui-framework 1.16.8 → 1.17.0

package/api/explorer-batch-info-loader.js

@@ -1,85 +1,111 @@
-import {throttle} from 'throttle-debounce'
-
-export class ExplorerBatchInfoLoader {
-    constructor(fetchCallback, processResponseCallback) {
-        this.pendingRequests = {}
-        this.requestsQueue = []
-        this.fetchDataFromServer = throttle(500, this.fetchDataFromServer, {noLeading: true})
-        this.fetchCallback = fetchCallback
-        this.processResponseCallback = processResponseCallback
-    }
-
-    pendingRequests
-
-    requestsQueue = []
-
-    fetchCallback
-
-    processResponseCallback
-
-    loadEntry(key) {
-        //check whether the same address is being fetched right now
-        const pending = this.pendingRequests[key]
-        if (pending) return pending
-        const promise = new Promise(resolve => {
-            this.requestsQueue.push({
-                key,
-                finished: data => {
-                    delete this.pendingRequests[key]
-                    resolve(data)
-                }
-            })
-            this.fetchDataFromServer()
-        })
-        this.pendingRequests[key] = promise
-        return promise
-    }
-
-    fetchDataFromServer() {
-        if (!this.requestsQueue.length) return
-        const batch = this.requestsQueue.splice(0, 50)
-        if (!batch.length) return
-        return this.fetchCallback(batch.map(e => e.key))
-            .then(data => {
-                if (data.error)
-                    return //TODO: handle errors in a more elegant way, with retries
-                //reschedule another batch fetch if the queue is not empty
-                if (this.requestsQueue.length) {
-                    setTimeout(() => this.fetchDataFromServer(), 400)
-                }
-                //remap batch array to an object for the faster elements access
-                const batchMap = {}
-                for (const {key, finished} of batch) {
-                    batchMap[key] = finished
-                }
-                for (const entry of data._embedded.records) {
-                    const {key} = this.processResponseCallback(entry)
-                    const finalizeRequest = batchMap[key]
-                    if (finalizeRequest) {
-                        finalizeRequest(entry)
-                    }
-                    //cleanup promise reference
-                    delete batchMap[key]
-                    delete this.pendingRequests[key]
-                }
-                //return null for all keys that have not been found
-                for (const key of Object.keys(batchMap)) {
-                    const finalizeRequest = batchMap[key]
-                    if (finalizeRequest) {
-                        finalizeRequest(null)
-                    }
-                    //cleanup promise reference
-                    delete this.pendingRequests[key]
-                }
-            })
-            .catch(err => {
-                console.error(err)
-                //finalize all pending promises with nulls
-                for (const {key, finished} of batch) {
-                    finished(null)
-                    //cleanup promise reference
-                    delete this.pendingRequests[key]
-                }
-            })
-    }
-}
+import {throttle} from 'throttle-debounce'
+
+/**
+ * Batches multiple individual load requests into single API calls for efficiency.
+ * Accumulates requests over a short window and sends them together.
+ */
+export class ExplorerBatchInfoLoader {
+    /**
+     * @param {function(string[]): Promise<{_embedded: {records: Object[]}}>} fetchCallback - Fetches a batch of entries by their keys
+     * @param {function(Object): {key: string, info: *}} processResponseCallback - Extracts key and info from each response record
+     */
+    constructor(fetchCallback, processResponseCallback) {
+        this.pendingRequests = {}
+        this.requestsQueue = []
+        this.fetchDataFromServer = throttle(500, this.fetchDataFromServer, {noLeading: true})
+        this.fetchCallback = fetchCallback
+        this.processResponseCallback = processResponseCallback
+    }
+
+    /**
+     * @type {{}}
+     * @private
+     */
+    pendingRequests
+    /**
+     * @type {[]}
+     * @private
+     */
+    requestsQueue = []
+    /**
+     * @type {function}
+     * @private
+     */
+    fetchCallback
+    /**
+     * @type {function}
+     * @private
+     */
+    processResponseCallback
+
+    /**
+     * Load a single entry by key, batching the request with other pending loads
+     * @param {string} key - Entry identifier
+     * @return {Promise<*>} Resolves with the entry data or null if not found
+     */
+    loadEntry(key) {
+        //check whether the same address is being fetched right now
+        const pending = this.pendingRequests[key]
+        if (pending) return pending
+        const promise = new Promise(resolve => {
+            this.requestsQueue.push({
+                key,
+                finished: data => {
+                    delete this.pendingRequests[key]
+                    resolve(data)
+                }
+            })
+            this.fetchDataFromServer()
+        })
+        this.pendingRequests[key] = promise
+        return promise
+    }
+
+    fetchDataFromServer() {
+        if (!this.requestsQueue.length) return
+        const batch = this.requestsQueue.splice(0, 50)
+        if (!batch.length) return
+        return this.fetchCallback(batch.map(e => e.key))
+            .then(data => {
+                if (data.error)
+                    return //TODO: handle errors in a more elegant way, with retries
+                //reschedule another batch fetch if the queue is not empty
+                if (this.requestsQueue.length) {
+                    setTimeout(() => this.fetchDataFromServer(), 400)
+                }
+                //remap batch array to an object for the faster elements access
+                const batchMap = {}
+                for (const {key, finished} of batch) {
+                    batchMap[key] = finished
+                }
+                for (const entry of data._embedded.records) {
+                    const {key} = this.processResponseCallback(entry)
+                    const finalizeRequest = batchMap[key]
+                    if (finalizeRequest) {
+                        finalizeRequest(entry)
+                    }
+                    //cleanup promise reference
+                    delete batchMap[key]
+                    delete this.pendingRequests[key]
+                }
+                //return null for all keys that have not been found
+                for (const key of Object.keys(batchMap)) {
+                    const finalizeRequest = batchMap[key]
+                    if (finalizeRequest) {
+                        finalizeRequest(null)
+                    }
+                    //cleanup promise reference
+                    delete this.pendingRequests[key]
+                }
+            })
+            .catch(err => {
+                console.error(err)
+                //finalize all pending promises with nulls
+                for (const {key, finished} of batch) {
+                    finished(null)
+                    //cleanup promise reference
+                    delete this.pendingRequests[key]
+                }
+            })
+    }
+}

package/api/explorer-tx-api.js

@@ -1,29 +1,29 @@
-import {parseStellarGenericId} from '../stellar/ledger-generic-id'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
-import {fetchExplorerApi} from './explorer-api-call'
-
-/**
- * Load transaction from API
- * @param {String} txHashOrId - Transaction hash or generic id
- * @return {Promise<Object>}
- */
-export function loadTransaction(txHashOrId) {
-    if (/^\d+$/.test(txHashOrId)) { //treat as generic tx id
-        const {type} = parseStellarGenericId(txHashOrId)
-        if (type !== 'transaction')
-            return Promise.reject(new Error('Invalid transaction id: ' + txHashOrId))
-    } else if (!/^[a-fA-F0-9]{64}$/.test(txHashOrId))
-        return Promise.reject(new Error('Invalid transaction hash or id: ' + txHashOrId))
-
-    return fetchExplorerApi(getCurrentStellarNetwork() + '/tx/' + txHashOrId)
-}
-
-
-/**
- * Load transactions included into the ledger
- * @param {Number} sequence - Ledger sequence
- * @return {Promise<Array<Object>>}
- */
-export function loadLedgerTransactions(sequence) {
-    return fetchExplorerApi(getCurrentStellarNetwork() + '/ledger/' + sequence + '/tx')
+import {parseStellarGenericId} from '../stellar/ledger-generic-id'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+
+/**
+ * Load transaction from API
+ * @param {string} txHashOrId - Transaction hash or generic id
+ * @return {Promise<Object>}
+ */
+export function loadTransaction(txHashOrId) {
+    if (/^\d+$/.test(txHashOrId)) { //treat as generic tx id
+        const {type} = parseStellarGenericId(txHashOrId)
+        if (type !== 'transaction')
+            return Promise.reject(new Error('Invalid transaction id: ' + txHashOrId))
+    } else if (!/^[a-fA-F0-9]{64}$/.test(txHashOrId))
+        return Promise.reject(new Error('Invalid transaction hash or id: ' + txHashOrId))
+
+    return fetchExplorerApi(getCurrentStellarNetwork() + '/tx/' + txHashOrId)
+}
+
+
+/**
+ * Load transactions included into the ledger
+ * @param {number} sequence - Ledger sequence
+ * @return {Promise<Array<Object>>}
+ */
+export function loadLedgerTransactions(sequence) {
+    return fetchExplorerApi(getCurrentStellarNetwork() + '/ledger/' + sequence + '/tx')
 }

package/api/ledger-stream.js

@@ -1,6 +1,9 @@
 import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 import {fetchExplorerApi} from './explorer-api-call'
 
+/**
+ * Long-polling stream that notifies listeners about new ledgers
+ */
 class LedgerStream {
     constructor() {
         this.listeners = new Set()
@@ -89,13 +92,25 @@ class LedgerStream {
         }
     }
 
+    /**
+     * Fetch the most recent ledger info from the API
+     * @return {Promise<Object>}
+     */
     async getLast() {
         return fetchExplorerApi(getCurrentStellarNetwork() + '/ledger/last')
     }
 
+    /**
+     * Fetch the sequence number of the most recent ledger
+     * @return {Promise<number>}
+     */
     async getLastSequence() {
         return (await this.getLast()).sequence
     }
 }
 
+/**
+ * Singleton ledger stream instance for subscribing to new ledger notifications
+ * @type {LedgerStream}
+ */
 export const ledgerStream = new LedgerStream()

package/asset/amount.js

@@ -1,57 +1,57 @@
-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'
-
-/**
- * Formatted tokens amount
- * @param {String|Number} amount - Amount of tokens
- * @param {String|AssetDescriptor|Asset} asset - Asset name/descriptor
- * @param {String|Number|'auto'} decimals - Number of decimals to show for a formatted numeric value
- * @param {Boolean} [adjust] - Treat amount value as raw Int64 stroops amount
- * @param {Boolean|'floor'} [round] - Round the amount
- * @param {Boolean} [issuer] - Whether to show asset issuer
- * @param {Boolean} [icon] - Whether to show asset icon
- * @constructor
- */
-export const Amount = React.memo(function Amount({amount, asset, decimals, adjust, round, issuer, icon}) {
-    const meta = useAssetMeta(asset)
-    if (amount === undefined || amount === null)
-        return null
-    if (adjust === true) {
-        try {
-            amount = fromStroops(amount, meta?.decimals ?? 7)
-        } catch (e) {
-            console.error(e)
-            return null
-        }
-    }
-    if (round) {
-        let [int, fract] = (typeof amount === 'number' ? amount.toFixed(7) : amount).split('.')
-        if (fract > 0) {
-            int = parseFloat(int)
-            fract = parseFloat('0.' + fract)
-            if (amount < 0) {
-                fract *= -1
-            }
-
-            const rounded = round === 'floor' ? Math.floor(fract) : Math.round(fract)
-            amount = int + rounded
-        }
-    }
-    try {
-        amount = decimals === 'auto' ? formatWithAutoPrecision(amount) : formatWithPrecision(amount, decimals)
-    } catch (e) {
-        console.error(e)
-        return null
-    }
-    return <span className="amount nowrap condensed">
-        {amount}
-        {!!asset && <>
-            {' '}{isAssetValid(asset) || isValidPoolId(asset) ?
-            <AssetLink asset={asset} icon={icon} issuer={issuer}/> :
-            asset.toString()}
-        </>}
-    </span>
+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'
+
+/**
+ * Formatted tokens amount
+ * @param {string|number} amount - Amount of tokens
+ * @param {string|AssetDescriptor|Asset} asset - Asset name/descriptor
+ * @param {string|number|'auto'} decimals - Number of decimals to show for a formatted numeric value
+ * @param {boolean} [adjust] - Treat amount value as raw Int64 stroops amount
+ * @param {boolean|'floor'} [round] - Round the amount
+ * @param {boolean} [issuer] - Whether to show asset issuer
+ * @param {boolean} [icon] - Whether to show asset icon
+ * @constructor
+ */
+export const Amount = React.memo(function Amount({amount, asset, decimals, adjust, round, issuer, icon}) {
+    const meta = useAssetMeta(asset)
+    if (amount === undefined || amount === null)
+        return null
+    if (adjust === true) {
+        try {
+            amount = fromStroops(amount, meta?.decimals ?? 7)
+        } catch (e) {
+            console.error(e)
+            return null
+        }
+    }
+    if (round) {
+        let [int, fract] = (typeof amount === 'number' ? amount.toFixed(7) : amount).split('.')
+        if (fract > 0) {
+            int = parseFloat(int)
+            fract = parseFloat('0.' + fract)
+            if (amount < 0) {
+                fract *= -1
+            }
+
+            const rounded = round === 'floor' ? Math.floor(fract) : Math.round(fract)
+            amount = int + rounded
+        }
+    }
+    try {
+        amount = decimals === 'auto' ? formatWithAutoPrecision(amount) : formatWithPrecision(amount, decimals)
+    } catch (e) {
+        console.error(e)
+        return null
+    }
+    return <span className="amount nowrap condensed">
+        {amount}
+        {!!asset && <>
+            {' '}{isAssetValid(asset) || isValidPoolId(asset) ?
+            <AssetLink asset={asset} icon={icon} issuer={issuer}/> :
+            asset.toString()}
+        </>}
+    </span>
 })

package/asset/asset-icon.js

@@ -1,41 +1,41 @@
-import React from 'react'
-import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {drawIdenticon} from '../account/identicon'
-import {useAssetMeta} from './asset-meta-hooks'
-
-/**
- * Inline asset icon
- * @param {String|AssetDescriptor|Asset} asset - Asset name/descriptor
- * @param {String} [className] - Optional CSS class name
- * @param {{}} [style] - Optional CSS inline style
- * @param {*} [children] - Optional inner text
- * @constructor
- */
-export const AssetIcon = React.memo(function AssetIcon({asset, className, style, children}) {
-    const meta = useAssetMeta(asset)
-    if (typeof asset === 'string') {
-        asset = AssetDescriptor.parse(asset)
-    }
-    const icon = meta?.toml_info?.image || meta?.toml_info?.orgLogo
-    const classes = ['asset-icon']
-    if (!style) {
-        style = {}
-    }
-
-    if (className) {
-        classes.push(className)
-    }
-
-    if (asset.isNative) { // native asset
-        classes.push('icon icon-stellar')
-    } else if (icon) { // asset with an icon
-        style.backgroundImage = `url('${icon}')`
-    } else if (asset.isContract) {
-        style.backgroundImage = `url('${'data:image/svg+xml;charset=utf-8,' + drawIdenticon(asset.toString())}')`
-        style.borderRadius = '50%'
-    } else { // asset without metadata
-        classes.push('icon icon-empty-circle')
-    }
-
-    return <span className={classes.join(' ')} style={style}>{children}</span>
-})
+import React from 'react'
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {drawIdenticon} from '../account/identicon'
+import {useAssetMeta} from './asset-meta-hooks'
+
+/**
+ * Inline asset icon
+ * @param {string|AssetDescriptor|Asset} asset - Asset name/descriptor
+ * @param {string} [className] - Optional CSS class name
+ * @param {{}} [style] - Optional CSS inline style
+ * @param {*} [children] - Optional inner text
+ * @constructor
+ */
+export const AssetIcon = React.memo(function AssetIcon({asset, className, style, children}) {
+    const meta = useAssetMeta(asset)
+    if (typeof asset === 'string') {
+        asset = AssetDescriptor.parse(asset)
+    }
+    const icon = meta?.toml_info?.image || meta?.toml_info?.orgLogo
+    const classes = ['asset-icon']
+    if (!style) {
+        style = {}
+    }
+
+    if (className) {
+        classes.push(className)
+    }
+
+    if (asset.isNative) { // native asset
+        classes.push('icon icon-stellar')
+    } else if (icon) { // asset with an icon
+        style.backgroundImage = `url('${icon}')`
+    } else if (asset.isContract) {
+        style.backgroundImage = `url('${'data:image/svg+xml;charset=utf-8,' + drawIdenticon(asset.toString())}')`
+        style.borderRadius = '50%'
+    } else { // asset without metadata
+        classes.push('icon icon-empty-circle')
+    }
+
+    return <span className={classes.join(' ')} style={style}>{children}</span>
+})

package/asset/asset-issuer.js

@@ -1,22 +1,22 @@
-import React from 'react'
-import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {AccountAddress} from '../account/account-address'
-import {useAssetMeta} from './asset-meta-hooks'
-
-/**
- * Inline asset issuer
- * @param {String|AssetDescriptor|Asset} asset - Asset name/descriptor
- * @constructor
- */
-export const AssetIssuer = React.memo(function AssetIssuer({asset}) {
-    let meta = useAssetMeta(asset)
-    if (asset === 'XLM' || asset.isNative) {
-        meta = {domain: 'stellar.org'}
-    }
-    asset = AssetDescriptor.parse(asset)
-    return <span className="asset-issuer condensed">
-        {meta?.domain ?
-            <>{meta.domain}</> :
-            <><AccountAddress account={asset.issuer} link={false} chars={8} icon={false}/></>}
-    </span>
+import React from 'react'
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {AccountAddress} from '../account/account-address'
+import {useAssetMeta} from './asset-meta-hooks'
+
+/**
+ * Inline asset issuer
+ * @param {string|AssetDescriptor|Asset} asset - Asset name/descriptor
+ * @constructor
+ */
+export const AssetIssuer = React.memo(function AssetIssuer({asset}) {
+    let meta = useAssetMeta(asset)
+    if (asset === 'XLM' || asset.isNative) {
+        meta = {domain: 'stellar.org'}
+    }
+    asset = AssetDescriptor.parse(asset)
+    return <span className="asset-issuer condensed">
+        {meta?.domain ?
+            <>{meta.domain}</> :
+            <><AccountAddress account={asset.issuer} link={false} chars={8} icon={false}/></>}
+    </span>
 })