@stellar-expert/ui-framework 1.16.8 → 1.19.0

package/account/account-address.js

@@ -1,127 +1,127 @@
-import React from 'react'
-import cn from 'classnames'
-import {shortenString} from '@stellar-expert/formatter'
-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'
-
-
-function isPublicKeyOrContract(type) {
-    return type === 'ed25519' || type === 'contract' || type === 'muxed'
-}
-
-function getAccountPredefinedDisplayName(address) {
-    if (!window.predefinedAccountDisplayNames)
-        return undefined
-    return window.predefinedAccountDisplayNames[address]
-}
-
-function AccountDisplayName({type, address, name}) {
-    const predefined = getAccountPredefinedDisplayName(address)
-    let directoryInfo = useDirectory(!predefined && !name && isPublicKeyOrContract(type) && address),
-        warning
-    if (name === false)
-        return null
-    if (predefined)
-        return `[${predefined}] `
-    if (directoryInfo) {
-        name = directoryInfo.name
-        if (directoryInfo.tags.includes('malicious')) {
-            warning = <i className="icon icon-warning color-warning"
-                         title="This account was reported for illicit or fraudulent activity. Do not send funds to this address and do not trust any person affiliated with it."/>
-        }
-    }
-    if (!name && !warning) return null
-    return <>
-        {name ? `[${name}] ` : ''}
-        {warning}
-    </>
-
-}
-
-/**
- * Explorer link for Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
- * @param {String} account - StrKey-encoded Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
- * @param {Number|'all'} [chars] - Visible address characters count
- * @param {Bool|String} [name] - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
- * @param {Bool|String} [link] - Explicit link; if false, the component is rendered without a link
- * @param {Boolean} [icon] - Whether to show/hide account identicon
- * @param {String} [network] - Stellar network identifier
- * @param {*} [prefix] - Link prefix
- * @param {*} [suffix] - Link suffix
- * @param {{}} [style] - Optional CSS inline style
- * @param {String} [className] - Optional CSS class attribute
- * @param {...*} [otherProps] - Optional container parameters
- * @constructor
- */
-export const AccountAddress = React.memo(function AccountAddress({
-                                                                     account,
-                                                                     chars = 8,
-                                                                     name,
-                                                                     link,
-                                                                     style,
-                                                                     className,
-                                                                     icon,
-                                                                     prefix,
-                                                                     suffix,
-                                                                     network,
-                                                                     ...otherProps
-                                                                 }) {
-    useStellarNetwork()
-    const keyType = decodeKeyType(account)
-    if (!keyType)
-        return null //failed to decode address type
-    let {type, address, muxedId, publicKey, payload} = keyType
-
-    let innerStyle = !style ? undefined : style
-
-    let ed25519Address = address
-    if (chars && chars !== 'all') {
-        address = shortenString(account, chars)
-    }
-
-    const children = <>
-        {prefix}
-        {icon !== false && isPublicKeyOrContract(type) && <AccountIdenticon key="identicon" address={ed25519Address}/>}
-        <AccountDisplayName type={type} address={ed25519Address} name={name}/>
-        <span className="account-key">{address}</span>
-        {muxedId !== undefined && <InfoTooltip icon="icon-plus">
-            Subaccount of a custodial account<br/>
-            <AccountAddress account={ed25519Address} name={false} chars={12}/>
-            <div className="dimmed text-tiny micro-space">Multiplexed id: {muxedId.toString()}</div>
-        </InfoTooltip>}
-        {payload !== undefined && <InfoTooltip icon="icon-plus">
-            ED25519 payload signer<br/>
-            <AccountAddress account={publicKey} name={false} chars={12}/>
-            <div className="dimmed text-tiny micro-space">Payload: {payload}</div>
-        </InfoTooltip>}
-        {suffix}
-    </>
-
-    const containerProps = {
-        title: account,
-        'aria-label': account,
-        className: cn('account-address', className),
-        style: innerStyle,
-        ...otherProps
-    }
-    let renderAs = 'span'
-
-    if (link !== false && isPublicKeyOrContract(type)) {
-        renderAs = 'a'
-        if (typeof link === 'string') {
-            containerProps.href = link
-        } else {
-            containerProps.href = formatExplorerLink(type === 'contract' ? 'contract' : 'account', account, network)
-            if (window.origin !== explorerFrontendOrigin) {
-                containerProps.target = '_blank'
-            }
-        }
-    }
-
-    return React.createElement(renderAs, containerProps, children)
-})
+import React from 'react'
+import cn from 'classnames'
+import {shortenString} from '@stellar-expert/formatter'
+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'
+
+
+function isPublicKeyOrContract(type) {
+    return type === 'ed25519' || type === 'contract' || type === 'muxed'
+}
+
+function getAccountPredefinedDisplayName(address) {
+    if (!window.predefinedAccountDisplayNames)
+        return undefined
+    return window.predefinedAccountDisplayNames[address]
+}
+
+function AccountDisplayName({type, address, name}) {
+    const predefined = getAccountPredefinedDisplayName(address)
+    let directoryInfo = useDirectory(!predefined && !name && isPublicKeyOrContract(type) && address),
+        warning
+    if (name === false)
+        return null
+    if (predefined)
+        return `[${predefined}] `
+    if (directoryInfo) {
+        name = directoryInfo.name
+        if (directoryInfo.tags.includes('malicious')) {
+            warning = <i className="icon icon-warning color-warning"
+                         title="This account was reported for illicit or fraudulent activity. Do not send funds to this address and do not trust any person affiliated with it."/>
+        }
+    }
+    if (!name && !warning) return null
+    return <>
+        {name ? `[${name}] ` : ''}
+        {warning}
+    </>
+
+}
+
+/**
+ * Explorer link for Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
+ * @param {string} account - StrKey-encoded Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
+ * @param {number|'all'} [chars] - Visible address characters count
+ * @param {boolean|string} [name] - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
+ * @param {boolean|string} [link] - Explicit link; if false, the component is rendered without a link
+ * @param {boolean} [icon] - Whether to show/hide account identicon
+ * @param {string} [network] - Stellar network identifier
+ * @param {*} [prefix] - Link prefix
+ * @param {*} [suffix] - Link suffix
+ * @param {{}} [style] - Optional CSS inline style
+ * @param {string} [className] - Optional CSS class attribute
+ * @param {...*} [otherProps] - Optional container parameters
+ * @constructor
+ */
+export const AccountAddress = React.memo(function AccountAddress({
+                                                                     account,
+                                                                     chars = 8,
+                                                                     name,
+                                                                     link,
+                                                                     style,
+                                                                     className,
+                                                                     icon,
+                                                                     prefix,
+                                                                     suffix,
+                                                                     network,
+                                                                     ...otherProps
+                                                                 }) {
+    useStellarNetwork()
+    const keyType = decodeKeyType(account)
+    if (!keyType)
+        return null //failed to decode address type
+    let {type, address, muxedId, publicKey, payload} = keyType
+
+    let innerStyle = !style ? undefined : style
+
+    let ed25519Address = address
+    if (chars && chars !== 'all') {
+        address = shortenString(account, chars)
+    }
+
+    const children = <>
+        {prefix}
+        {icon !== false && isPublicKeyOrContract(type) && <AccountIdenticon key="identicon" address={ed25519Address}/>}
+        <AccountDisplayName type={type} address={ed25519Address} name={name}/>
+        <span className="account-key">{address}</span>
+        {muxedId !== undefined && <InfoTooltip icon="icon-plus">
+            Subaccount of a custodial account<br/>
+            <AccountAddress account={ed25519Address} name={false} chars={12}/>
+            <div className="dimmed text-tiny micro-space">Multiplexed id: {muxedId.toString()}</div>
+        </InfoTooltip>}
+        {payload !== undefined && <InfoTooltip icon="icon-plus">
+            ED25519 payload signer<br/>
+            <AccountAddress account={publicKey} name={false} chars={12}/>
+            <div className="dimmed text-tiny micro-space">Payload: {payload}</div>
+        </InfoTooltip>}
+        {suffix}
+    </>
+
+    const containerProps = {
+        title: account,
+        'aria-label': account,
+        className: cn('account-address', className),
+        style: innerStyle,
+        ...otherProps
+    }
+    let renderAs = 'span'
+
+    if (link !== false && isPublicKeyOrContract(type)) {
+        renderAs = 'a'
+        if (typeof link === 'string') {
+            containerProps.href = link
+        } else {
+            containerProps.href = formatExplorerLink(type === 'contract' ? 'contract' : 'account', account, network)
+            if (window.origin !== explorerFrontendOrigin) {
+                containerProps.target = '_blank'
+            }
+        }
+    }
+
+    return React.createElement(renderAs, containerProps, children)
+})

package/account/available-balance.js

@@ -1,23 +1,23 @@
-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, 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
-        available = available - (BigInt(reserves) * 5000000n)
-        //TODO: fetch base_reserve from the Horizon
-    }
-    if (additionalReserves !== null) {
-        available = available - toStroops(additionalReserves, decimals)
-    }
-    return fromStroops(available, decimals)
+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, 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
+        available = available - (BigInt(reserves) * 5000000n)
+        //TODO: fetch base_reserve from the Horizon
+    }
+    if (additionalReserves !== null) {
+        available = available - toStroops(additionalReserves, decimals)
+    }
+    return fromStroops(available, decimals)
 }

package/account/identicon.js

@@ -1,91 +1,91 @@
-import React from 'react'
-import './identicon.scss'
-
-const RESOLUTION = 7
-const SIZE = 448
-const base32Alphabet = {}
-
-//map base32 alphabet
-'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567'.split('').map((c, i) => base32Alphabet[c] = i)
-
-function decodeBase32(input) {
-    const buf = []
-    let shift = 8
-    let carry = 0
-
-    input.toUpperCase().split('').forEach(char => {
-        const symbol = base32Alphabet[char] & 0xff
-        shift -= 5
-        if (shift > 0) {
-            carry |= symbol << shift
-        } else if (shift < 0) {
-            buf.push(carry | (symbol >> -shift))
-            shift += 8
-            carry = (symbol << shift) & 0xff
-        } else {
-            buf.push(carry | symbol)
-            shift = 8
-            carry = 0
-        }
-    })
-
-    if (shift !== 8 && carry !== 0) {
-        buf.push(carry)
-        shift = 8
-        carry = 0
-    }
-
-    return buf
-}
-
-/**
- * Draw Stellar address identicon on the given canvas
- * @param {String} address - StrKey-encoded account address
- * @param {Number} [size] - Identicon painting area size, in pixels (by default 448)
- * @return {String}
- */
-export function drawIdenticon(address, size = SIZE) {
-    //take 16 meaningful bytes from the raw pub key
-    const decoded = decodeBase32(address).slice(2, 16)
-    const width = RESOLUTION
-    const height = RESOLUTION
-    const columns = Math.ceil(width / 2)
-    const cellSize = size / width
-    const addressBytes = decoded.slice(1)
-    const fillStyle = `hsl(${360 * decoded[0] / 256 | 0},58%,52%)`
-    const dots = []
-    const rsize = ` width="${cellSize}" height="${cellSize}"`
-    for (let row = 0; row < height; row++) {
-        for (let column = 0; column < columns; column++) {
-            const position = column + row * columns
-            const bitSet = (addressBytes[position / 8 | 0] & (1 << (7 - position % 8))) !== 0
-            if (bitSet) {
-                dots.push(`<rect x="${cellSize * column}" y="${cellSize * row}"${rsize}/>`)
-                dots.push(`<rect x="${cellSize * (width - column - 1)}" y="${cellSize * row}"${rsize}/>`)
-            }
-        }
-    }
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" fill="${fillStyle}">${dots.join('')}</svg>`
-}
-
-/**
- * Renders account-specific identicon
- * @param {String} address - StrKey-encoded account address
- * @param {Number} size - Identicon size
- * @constructor
- */
-export const AccountIdenticon = React.memo(function AccountIdenticon({address, size}) {
-    const props = {
-        className: 'identicon',
-        src: 'data:image/svg+xml;charset=utf-8,' + drawIdenticon(address),
-        width: SIZE,
-        height: SIZE
-    }
-    if (size) {
-        props.style = {
-            width: size,
-            height: size
-        }
-    }
-    return <img {...props}/>
+import React from 'react'
+import './identicon.scss'
+
+const RESOLUTION = 7
+const SIZE = 448
+const base32Alphabet = {}
+
+//map base32 alphabet
+'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567'.split('').map((c, i) => base32Alphabet[c] = i)
+
+function decodeBase32(input) {
+    const buf = []
+    let shift = 8
+    let carry = 0
+
+    input.toUpperCase().split('').forEach(char => {
+        const symbol = base32Alphabet[char] & 0xff
+        shift -= 5
+        if (shift > 0) {
+            carry |= symbol << shift
+        } else if (shift < 0) {
+            buf.push(carry | (symbol >> -shift))
+            shift += 8
+            carry = (symbol << shift) & 0xff
+        } else {
+            buf.push(carry | symbol)
+            shift = 8
+            carry = 0
+        }
+    })
+
+    if (shift !== 8 && carry !== 0) {
+        buf.push(carry)
+        shift = 8
+        carry = 0
+    }
+
+    return buf
+}
+
+/**
+ * Draw Stellar address identicon on the given canvas
+ * @param {string} address - StrKey-encoded account address
+ * @param {number} [size] - Identicon painting area size, in pixels (by default 448)
+ * @return {string}
+ */
+export function drawIdenticon(address, size = SIZE) {
+    //take 16 meaningful bytes from the raw pub key
+    const decoded = decodeBase32(address).slice(2, 16)
+    const width = RESOLUTION
+    const height = RESOLUTION
+    const columns = Math.ceil(width / 2)
+    const cellSize = size / width
+    const addressBytes = decoded.slice(1)
+    const fillStyle = `hsl(${360 * decoded[0] / 256 | 0},58%,52%)`
+    const dots = []
+    const rsize = ` width="${cellSize}" height="${cellSize}"`
+    for (let row = 0; row < height; row++) {
+        for (let column = 0; column < columns; column++) {
+            const position = column + row * columns
+            const bitSet = (addressBytes[position / 8 | 0] & (1 << (7 - position % 8))) !== 0
+            if (bitSet) {
+                dots.push(`<rect x="${cellSize * column}" y="${cellSize * row}"${rsize}/>`)
+                dots.push(`<rect x="${cellSize * (width - column - 1)}" y="${cellSize * row}"${rsize}/>`)
+            }
+        }
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" fill="${fillStyle}">${dots.join('')}</svg>`
+}
+
+/**
+ * Renders account-specific identicon
+ * @param {string} address - StrKey-encoded account address
+ * @param {number} size - Identicon size
+ * @constructor
+ */
+export const AccountIdenticon = React.memo(function AccountIdenticon({address, size}) {
+    const props = {
+        className: 'identicon',
+        src: 'data:image/svg+xml;charset=utf-8,' + drawIdenticon(address),
+        width: SIZE,
+        height: SIZE
+    }
+    if (size) {
+        props.style = {
+            width: size,
+            height: size
+        }
+    }
+    return <img {...props}/>
 })

package/account/signer-key.js

@@ -1,65 +1,66 @@
-import React from 'react'
-import {StrKey} from '@stellar/stellar-base'
-import {AccountAddress} from './account-address'
-
-/**
- * @param {Signer} signer
- * @return {{key: String, weight: Number}|null}
- * @internal
- */
-function decodeSigner(signer) {
-    if (!signer)
-        return null
-    let weight
-    let key
-    if (typeof signer.arm === 'function') { //raw xdr
-        const type = signer.arm()
-        weight = signer.weight()
-        switch (type) {
-            case 'ed25519':
-                key = StrKey.encodeEd25519PublicKey(signer.ed25519())
-                break
-            case 'preAuthTx':
-                key = StrKey.encodePreAuthTx(signer.preAuthTx())
-                break
-            case 'hashX':
-                key = StrKey.encodeSha256Hash(signer.hashX())
-                break
-            case 'ed25519SignedPayload':
-                key = StrKey.encodeSignedPayload(signer.ed25519SignedPayload())
-                break
-        }
-    } else { //parsed
-        if (signer.ed25519PublicKey) {
-            key = signer.ed25519PublicKey
-        } else if (signer.sha256Hash) {
-            key = StrKey.encodeSha256Hash(signer.sha256Hash)
-        } else if (signer.preAuthTx) {
-            key = StrKey.encodePreAuthTx(signer.preAuthTx)
-        } else if (signer.ed25519SignedPayload) {
-            key = StrKey.encodeSignedPayload(signer.ed25519SignedPayload)
-        }
-        weight = signer.weight
-    }
-    if (!key)
-        throw new Error('Unknown signer type: ' + JSON.stringify(signer))
-    return {key, weight}
-}
-
-/**
- * Account signer key description
- * @param {Signer} signer - StrKey-encoded Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
- * @param {String} [name] - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
- * @param {String} [className] - Optional CSS class attribute
- * @param {Boolean} [showWeight] - Whether to display weight attribute
- * @constructor
- */
-export const SignerKey = React.memo(function SignerKey({signer, name, className, showWeight = true}) {
-    if (!signer)
-        return null
-    const {key, weight} = decodeSigner(signer)
-    return <span className={className}>
-        <AccountAddress account={key} name={name}/>
-        {!!showWeight && <span className="dimmed text-tiny">&nbsp;(weight={weight})</span>}
-    </span>
+import React from 'react'
+import {StrKey} from '@stellar/stellar-base'
+import {AccountAddress} from './account-address'
+
+/**
+ * Decode a Stellar signer object (XDR or parsed) into a StrKey-encoded key and weight
+ * @param {Signer} signer
+ * @return {{key: string, weight: number}|null}
+ * @internal
+ */
+function decodeSigner(signer) {
+    if (!signer)
+        return null
+    let weight
+    let key
+    if (typeof signer.arm === 'function') { //raw xdr
+        const type = signer.arm()
+        weight = signer.weight()
+        switch (type) {
+            case 'ed25519':
+                key = StrKey.encodeEd25519PublicKey(signer.ed25519())
+                break
+            case 'preAuthTx':
+                key = StrKey.encodePreAuthTx(signer.preAuthTx())
+                break
+            case 'hashX':
+                key = StrKey.encodeSha256Hash(signer.hashX())
+                break
+            case 'ed25519SignedPayload':
+                key = StrKey.encodeSignedPayload(signer.ed25519SignedPayload())
+                break
+        }
+    } else { //parsed
+        if (signer.ed25519PublicKey) {
+            key = signer.ed25519PublicKey
+        } else if (signer.sha256Hash) {
+            key = StrKey.encodeSha256Hash(signer.sha256Hash)
+        } else if (signer.preAuthTx) {
+            key = StrKey.encodePreAuthTx(signer.preAuthTx)
+        } else if (signer.ed25519SignedPayload) {
+            key = StrKey.encodeSignedPayload(signer.ed25519SignedPayload)
+        }
+        weight = signer.weight
+    }
+    if (!key)
+        throw new Error('Unknown signer type: ' + JSON.stringify(signer))
+    return {key, weight}
+}
+
+/**
+ * Account signer key description
+ * @param {Signer} signer - StrKey-encoded Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
+ * @param {string} [name] - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
+ * @param {string} [className] - Optional CSS class attribute
+ * @param {boolean} [showWeight] - Whether to display weight attribute
+ * @constructor
+ */
+export const SignerKey = React.memo(function SignerKey({signer, name, className, showWeight = true}) {
+    if (!signer)
+        return null
+    const {key, weight} = decodeSigner(signer)
+    return <span className={className}>
+        <AccountAddress account={key} name={name}/>
+        {!!showWeight && <span className="dimmed text-tiny">&nbsp;(weight={weight})</span>}
+    </span>
 })