@stellar-expert/ui-framework 1.16.7 → 1.17.0

package/asset/asset-link.js

@@ -1,108 +1,108 @@
-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 './asset-link.scss'
-
-/**
- * Explorer asset link
- * @param {String|AssetDescriptor|Asset} asset - Asset name/descriptor
- * @param {Boolean|String} [link] - Reference link
- * @param {Boolean} [issuer] - Whether to show asset issuer
- * @param {Boolean} [icon] - Whether to show asset icon
- * @param {String} [className] - Optional CSS class name
- * @param {{}} [style] - Optional CSS style
- * @param {*} [children] - Optional inner link text
- * @constructor
- */
-export const AssetLink = React.memo(function AssetLink({
-                                                           asset,
-                                                           link,
-                                                           issuer,
-                                                           icon,
-                                                           className,
-                                                           style,
-                                                           children: innerText
-                                                       }) {
-    if (!(asset instanceof AssetDescriptor)) {
-        asset = AssetDescriptor.parse(asset)
-    }
-    useStellarNetwork()
-    const meta = useAssetMeta(asset)
-
-    if (!asset)
-        return null
-
-    let children = innerText
-    if (!innerText) {
-        if (asset.poolId) {
-            if (meta) {
-                const [assetA, assetB] = meta.assets.map(a => AssetDescriptor.parse(a.asset))
-                children = <span title={'Liquidity pool ' + asset.poolId} className="nowrap">
-                    <span>
-                        <AssetWarningStatus meta={assetA}/>
-                        {icon !== false && <AssetIcon asset={assetA}/>}
-                        {assetA.code}
-                        {issuer === true && <AssetIssuer asset={assetA}/>}
-                    </span>
-                    <span style={{fontSize: '0.7em'}}>&nbsp;<i className="icon icon-plus dimmed"/>&nbsp;</span>
-                    <span>
-                        <AssetWarningStatus meta={assetB}/>
-                        {icon !== false && <AssetIcon asset={assetB}/>}
-                        {assetB.code}
-                        {issuer === true && <AssetIssuer asset={assetB}/>}
-                    </span>
-                </span>
-            } else {
-                children = <>{shortenString(asset.poolId)}</>
-            }
-        } else if (asset.isContract) {
-            children = <>
-                <AssetWarningStatus meta={meta}/>
-                {icon !== false && <AssetIcon asset={asset}/>}
-                {!!meta?.code && <span title={meta.tokenName}>{meta.code} </span>}
-                {(issuer !== false || !meta?.code) &&
-                    <AccountAddress account={asset.contract} chars={8} link={false} icon={false}/>}
-            </>
-        } else {
-            children = <>
-                <AssetWarningStatus meta={meta}/>
-                {icon !== false && <AssetIcon asset={asset}/>}
-                {!!asset.code && asset.code}
-                {issuer !== false && <AssetIssuer asset={asset}/>}
-            </>
-        }
-    }
-
-    const props = {
-        'aria-label': asset.toString(),
-        className: cn('asset-link', className),
-        style,
-        children
-    }
-    if (link === false)
-        return <span {...props}/>
-    if (typeof link === 'string') {
-        props.href = link
-    } else {
-        props.href = asset.poolId ?
-            formatExplorerLink('liquidity-pool', asset.poolId) :
-            formatExplorerLink('asset', asset.toString())
-        if (window.origin !== explorerFrontendOrigin) {
-            props.target = '_blank'
-        }
-    }
-    return <a {...props}/>
-})
-
-function AssetWarningStatus({meta}) {
-    if (!meta?.unsafe)
-        return null
-    return <i className="icon icon-warning color-warning" title="Warning: asset reported as unsafe"/>
+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 './asset-link.scss'
+
+/**
+ * Explorer asset link
+ * @param {string|AssetDescriptor|Asset} asset - Asset name/descriptor
+ * @param {boolean|string} [link] - Reference link
+ * @param {boolean} [issuer] - Whether to show asset issuer
+ * @param {boolean} [icon] - Whether to show asset icon
+ * @param {string} [className] - Optional CSS class name
+ * @param {{}} [style] - Optional CSS style
+ * @param {*} [children] - Optional inner link text
+ * @constructor
+ */
+export const AssetLink = React.memo(function AssetLink({
+                                                           asset,
+                                                           link,
+                                                           issuer,
+                                                           icon,
+                                                           className,
+                                                           style,
+                                                           children: innerText
+                                                       }) {
+    if (!(asset instanceof AssetDescriptor)) {
+        asset = AssetDescriptor.parse(asset)
+    }
+    useStellarNetwork()
+    const meta = useAssetMeta(asset)
+
+    if (!asset)
+        return null
+
+    let children = innerText
+    if (!innerText) {
+        if (asset.poolId) {
+            if (meta) {
+                const [assetA, assetB] = meta.assets.map(a => AssetDescriptor.parse(a.asset))
+                children = <span title={'Liquidity pool ' + asset.poolId} className="nowrap">
+                    <span>
+                        <AssetWarningStatus meta={assetA}/>
+                        {icon !== false && <AssetIcon asset={assetA}/>}
+                        {assetA.code}
+                        {issuer === true && <AssetIssuer asset={assetA}/>}
+                    </span>
+                    <span style={{fontSize: '0.7em'}}>&nbsp;<i className="icon icon-plus dimmed"/>&nbsp;</span>
+                    <span>
+                        <AssetWarningStatus meta={assetB}/>
+                        {icon !== false && <AssetIcon asset={assetB}/>}
+                        {assetB.code}
+                        {issuer === true && <AssetIssuer asset={assetB}/>}
+                    </span>
+                </span>
+            } else {
+                children = <>{shortenString(asset.poolId)}</>
+            }
+        } else if (asset.isContract) {
+            children = <>
+                <AssetWarningStatus meta={meta}/>
+                {icon !== false && <AssetIcon asset={asset}/>}
+                {!!meta?.code && <span title={meta.tokenName}>{meta.code} </span>}
+                {(issuer !== false || !meta?.code) &&
+                    <AccountAddress account={asset.contract} chars={8} link={false} icon={false}/>}
+            </>
+        } else {
+            children = <>
+                <AssetWarningStatus meta={meta}/>
+                {icon !== false && <AssetIcon asset={asset}/>}
+                {!!asset.code && asset.code}
+                {issuer !== false && <AssetIssuer asset={asset}/>}
+            </>
+        }
+    }
+
+    const props = {
+        'aria-label': asset.toString(),
+        className: cn('asset-link', className),
+        style,
+        children
+    }
+    if (link === false)
+        return <span {...props}/>
+    if (typeof link === 'string') {
+        props.href = link
+    } else {
+        props.href = asset.poolId ?
+            formatExplorerLink('liquidity-pool', asset.poolId) :
+            formatExplorerLink('asset', asset.toString())
+        if (window.origin !== explorerFrontendOrigin) {
+            props.target = '_blank'
+        }
+    }
+    return <a {...props}/>
+})
+
+function AssetWarningStatus({meta}) {
+    if (!meta?.unsafe)
+        return null
+    return <i className="icon icon-warning color-warning" title="Warning: asset reported as unsafe"/>
 }

package/asset/asset-list-hooks.js

@@ -1,60 +1,60 @@
-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'
-
-const defaults = {
-    limit: 20,
-    order: 'desc',
-    sort: 'rating'
-}
-
-function getCurrentCursor(data) {
-    if (!data || !data.length) return undefined
-    return data[data.length - 1].paging_token
-}
-
-/**
- *
- * @param {Object} params
- * @return {{assets: Array<Object>, loadPage: Function, loading: Boolean}}
- */
-export function useAssetList(params) {
-    const [loading, setLoading] = useState(false),
-        [assets, setAssets] = useState({data: [], params}),
-        loadPage = throttle(1000, function () {
-            if (loading) return
-            const requestParams = {
-                ...defaults, ...params
-            }
-            if (equal(params, assets.params)) {
-                requestParams.cursor = getCurrentCursor(assets.data)
-            }
-            const endpoint = getCurrentStellarNetwork() + '/asset' + stringifyQuery(requestParams)
-            setLoading(true)
-            fetchExplorerApi(endpoint)
-                .then(res => {
-                    const {records} = res._embedded
-                    setAssets(existing => {
-                        let data = records
-                        if (equal(params, existing.params)) {
-                            data = [...existing.data, ...records]
-                        }
-                        return {data, params}
-                    })
-                    setLoading(false)
-                })
-                .catch(e => console.error(e))
-                .finally(() => {
-                    setLoading(false)
-                })
-        })
-    useDeepEffect(() => {
-        loadPage()
-    }, [params])
-
-    return {assets: assets.data, loadPage, loading}
+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'
+
+const defaults = {
+    limit: 20,
+    order: 'desc',
+    sort: 'rating'
+}
+
+function getCurrentCursor(data) {
+    if (!data || !data.length) return undefined
+    return data[data.length - 1].paging_token
+}
+
+/**
+ *
+ * @param {Object} params
+ * @return {{assets: Array<Object>, loadPage: function, loading: boolean}}
+ */
+export function useAssetList(params) {
+    const [loading, setLoading] = useState(false),
+        [assets, setAssets] = useState({data: [], params}),
+        loadPage = throttle(1000, function () {
+            if (loading) return
+            const requestParams = {
+                ...defaults, ...params
+            }
+            if (equal(params, assets.params)) {
+                requestParams.cursor = getCurrentCursor(assets.data)
+            }
+            const endpoint = getCurrentStellarNetwork() + '/asset' + stringifyQuery(requestParams)
+            setLoading(true)
+            fetchExplorerApi(endpoint)
+                .then(res => {
+                    const {records} = res._embedded
+                    setAssets(existing => {
+                        let data = records
+                        if (equal(params, existing.params)) {
+                            data = [...existing.data, ...records]
+                        }
+                        return {data, params}
+                    })
+                    setLoading(false)
+                })
+                .catch(e => console.error(e))
+                .finally(() => {
+                    setLoading(false)
+                })
+        })
+    useDeepEffect(() => {
+        loadPage()
+    }, [params])
+
+    return {assets: assets.data, loadPage, loading}
 }

package/asset/asset-meta-hooks.js

@@ -1,89 +1,89 @@
-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'
-
-/**
- * @typedef AssetBasicTomlInfo
- * @property {String} name
- * @property {String} orgName
- * @property {String} image
- * @property {Number} decimals
- */
-
-/**
- * @typedef AssetMeta
- * @property {String} name
- * @property {String} domain
- * @property {AssetBasicTomlInfo} toml_info
- */
-
-const cache = new InMemoryClientCache()
-
-const loader = new ExplorerBatchInfoLoader(batch => {
-    return fetchExplorerApi(getCurrentStellarNetwork() + '/asset/meta' + stringifyQuery({
-        asset: batch,
-        origin: window.location.origin
-    }))
-}, entry => {
-    cache.set(entry.name, entry)
-    return {
-        key: entry.name,
-        info: entry
-    }
-})
-
-function retrieveFromCache(asset) {
-    //try to load from the shared cache
-    const cachedEntry = cache.get(asset)
-    if (cachedEntry && !cachedEntry.isStale) {
-        if (!cachedEntry.isExpired)
-            return cachedEntry.data//everything is up to date - no need to re-fetch
-    }
-}
-
-function normalizeAssetName(asset) {
-    if (!asset)
-        return null
-    if (typeof asset === 'string' && asset.length === 56)
-        return asset //contract id
-    return AssetDescriptor.parse(asset).toFQAN()
-}
-
-/**
- *
- * @param {AssetDescriptor|String} asset
- * @return {AssetMeta}
- */
-export function useAssetMeta(asset) {
-    try {
-        asset = normalizeAssetName(asset)
-    } catch (e) {
-        asset = null
-    }
-    const [assetInfo, setAssetInfo] = useState(retrieveFromCache(asset))
-    useEffect(() => {
-        if (!asset)
-            return
-        const cached = retrieveFromCache(asset)
-        setAssetInfo(cached)
-        if (cached)
-            return
-        let unloaded = false
-        //load from the server
-        loader.loadEntry(asset)
-            .then(a => {
-                if (unloaded)
-                    return
-                setAssetInfo(a)
-            })
-        return () => {
-            unloaded = true
-        }
-    }, [asset])
-
-    return assetInfo
+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'
+
+/**
+ * @typedef AssetBasicTomlInfo
+ * @property {string} name
+ * @property {string} orgName
+ * @property {string} image
+ * @property {number} decimals
+ */
+
+/**
+ * @typedef AssetMeta
+ * @property {string} name
+ * @property {string} domain
+ * @property {AssetBasicTomlInfo} toml_info
+ */
+
+const cache = new InMemoryClientCache()
+
+const loader = new ExplorerBatchInfoLoader(batch => {
+    return fetchExplorerApi(getCurrentStellarNetwork() + '/asset/meta' + stringifyQuery({
+        asset: batch,
+        origin: window.location.origin
+    }))
+}, entry => {
+    cache.set(entry.name, entry)
+    return {
+        key: entry.name,
+        info: entry
+    }
+})
+
+function retrieveFromCache(asset) {
+    //try to load from the shared cache
+    const cachedEntry = cache.get(asset)
+    if (cachedEntry && !cachedEntry.isStale) {
+        if (!cachedEntry.isExpired)
+            return cachedEntry.data//everything is up to date - no need to re-fetch
+    }
+}
+
+function normalizeAssetName(asset) {
+    if (!asset)
+        return null
+    if (typeof asset === 'string' && asset.length === 56)
+        return asset //contract id
+    return AssetDescriptor.parse(asset).toFQAN()
+}
+
+/**
+ *
+ * @param {AssetDescriptor|string} asset
+ * @return {AssetMeta}
+ */
+export function useAssetMeta(asset) {
+    try {
+        asset = normalizeAssetName(asset)
+    } catch (e) {
+        asset = null
+    }
+    const [assetInfo, setAssetInfo] = useState(retrieveFromCache(asset))
+    useEffect(() => {
+        if (!asset)
+            return
+        const cached = retrieveFromCache(asset)
+        setAssetInfo(cached)
+        if (cached)
+            return
+        let unloaded = false
+        //load from the server
+        loader.loadEntry(asset)
+            .then(a => {
+                if (unloaded)
+                    return
+                setAssetInfo(a)
+            })
+        return () => {
+            unloaded = true
+        }
+    }, [asset])
+
+    return assetInfo
 }