@stellar-expert/ui-framework 1.16.4 → 1.16.6

package/account/available-balance.js

@@ -1,13 +1,15 @@
 import {toStroops, fromStroops} from '@stellar-expert/formatter'
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
 
 /**
  * Calculate available balance for a given account balance trustline
  * @param {AccountResponse} account
  * @param {Horizon.BalanceLine} balance
  * @param {Number} [additionalReserves]
+ * @param {Number} [decimals=7]
  * @return {String}
  */
-export function calculateAvailableBalance(account, balance, additionalReserves = null) {
+export function calculateAvailableBalance(account, balance, additionalReserves = null, decimals = 7) {
     let available = toStroops(balance.balance) - toStroops(balance.selling_liabilities || 0)
     if (balance.asset_type === 'native') {
         const reserves = 2 + account.subentry_count + account.num_sponsoring - account.num_sponsored
@@ -15,7 +17,7 @@ export function calculateAvailableBalance(account, balance, additionalReserves =
         //TODO: fetch base_reserve from the Horizon
     }
     if (additionalReserves !== null) {
-        available = available - toStroops(additionalReserves)
+        available = available - toStroops(additionalReserves, decimals)
     }
-    return fromStroops(available)
+    return fromStroops(available, decimals)
 }

package/asset/amount.js

@@ -1,6 +1,7 @@
 import React from 'react'
-import {formatWithPrecision, formatWithAutoPrecision, stripTrailingZeros, fromStroops} from '@stellar-expert/formatter'
+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'
 
 /**
@@ -15,11 +16,12 @@ import {AssetLink} from './asset-link'
  * @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)
+            amount = fromStroops(amount, meta?.decimals ?? 7)
         } catch (e) {
             console.error(e)
             return null
@@ -47,7 +49,9 @@ export const Amount = React.memo(function Amount({amount, asset, decimals, adjus
     return <span className="amount nowrap condensed">
         {amount}
         {!!asset && <>
-            {' '}{isAssetValid(asset) || isValidPoolId(asset) ? <AssetLink asset={asset} icon={icon} issuer={issuer}/> : asset.toString()}
+            {' '}{isAssetValid(asset) || isValidPoolId(asset) ?
+            <AssetLink asset={asset} icon={icon} issuer={issuer}/> :
+            asset.toString()}
         </>}
     </span>
 })

package/asset/asset-icon.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {drawIdenticon} from '../account/identicon'
 import {useAssetMeta} from './asset-meta-hooks'
 
 /**
@@ -12,6 +13,9 @@ import {useAssetMeta} from './asset-meta-hooks'
  */
 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) {
@@ -22,10 +26,13 @@ export const AssetIcon = React.memo(function AssetIcon({asset, className, style,
         classes.push(className)
     }
 
-    if (asset.toString() === 'XLM') { // native asset
+    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')
     }

package/asset/asset-link.js

@@ -65,10 +65,10 @@ export const AssetLink = React.memo(function AssetLink({
         } else if (asset.isContract) {
             children = <>
                 <AssetWarningStatus meta={meta}/>
-                {!!meta?.code && <>{meta.code} </>}
+                {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={!!icon}
-                                    title={meta?.tokenName}/>}
+                    <AccountAddress account={asset.contract} chars={8} link={false} icon={false}/>}
             </>
         } else {
             children = <>

package/asset/asset-meta-hooks.js

@@ -24,7 +24,10 @@ import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 const cache = new InMemoryClientCache()
 
 const loader = new ExplorerBatchInfoLoader(batch => {
-    return fetchExplorerApi(getCurrentStellarNetwork() + '/asset/meta' + stringifyQuery({asset: batch, origin: window.location.origin}))
+    return fetchExplorerApi(getCurrentStellarNetwork() + '/asset/meta' + stringifyQuery({
+        asset: batch,
+        origin: window.location.origin
+    }))
 }, entry => {
     cache.set(entry.name, entry)
     return {
@@ -56,7 +59,11 @@ function normalizeAssetName(asset) {
  * @return {AssetMeta}
  */
 export function useAssetMeta(asset) {
-    asset = normalizeAssetName(asset)
+    try {
+        asset = normalizeAssetName(asset)
+    } catch (e) {
+        asset = null
+    }
     const [assetInfo, setAssetInfo] = useState(retrieveFromCache(asset))
     useEffect(() => {
         if (!asset)
@@ -68,7 +75,11 @@ export function useAssetMeta(asset) {
         let unloaded = false
         //load from the server
         loader.loadEntry(asset)
-            .then(a => !unloaded && setAssetInfo(a))
+            .then(a => {
+                if (unloaded)
+                    return
+                setAssetInfo(a)
+            })
         return () => {
             unloaded = true
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.16.4",
+  "version": "1.16.6",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",
@@ -16,11 +16,11 @@
   "peerDependencies": {
     "@stellar/stellar-base": "^14.0.0",
     "@stellar/stellar-sdk": "^14.0.0",
-    "@stellar-expert/asset-descriptor": "^1.4.0",
+    "@stellar-expert/asset-descriptor": "^1.5.0",
     "@stellar-expert/claimable-balance-utils": "^1.4.1",
     "@stellar-expert/client-cache": "^1.1.0",
     "@stellar-expert/contract-wasm-interface-parser": "^3.2.0",
-    "@stellar-expert/formatter": "^2.5.0",
+    "@stellar-expert/formatter": "^3.0.0",
     "@stellar-expert/navigation": "^1.1.0",
     "@stellar-expert/tx-meta-effects-parser": "^8.3.3",
     "classnames": ">=2",