@stellar-expert/ui-framework 1.9.0

package/.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 StellarExpert Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @stellar-expert/ui-framework
+
+### StellarExpert shared UI components library

package/account/account-address.js

@@ -0,0 +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)
+})

package/account/account-address.scss

@@ -0,0 +1,20 @@
+.account-address {
+  white-space: nowrap;
+
+  .account-key {
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  &.plain * {
+    font: inherit;
+    white-space: normal;
+  }
+}
+
+h2,
+.table {
+  .account-address * {
+    letter-spacing: -.05em;
+  }
+}

package/account/available-balance.js

@@ -0,0 +1,21 @@
+import {toStroops, fromStroops} from '@stellar-expert/formatter'
+
+/**
+ * Calculate available balance for a given account balance trustline
+ * @param {AccountResponse} account
+ * @param {Horizon.BalanceLine} balance
+ * @param {Number} [additionalReserves]
+ * @return {String}
+ */
+export function calculateAvailableBalance(account, balance, additionalReserves = null) {
+    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)
+    }
+    return fromStroops(available)
+}

package/account/identicon.js

@@ -0,0 +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 size
+ * @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/identicon.scss

@@ -0,0 +1,6 @@
+.identicon {
+  display: inline-block;
+  width: .72em;
+  height: .72em;
+  margin: 0 .1em;
+}

package/account/signer-key.js

@@ -0,0 +1,65 @@
+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>
+})

package/api/api-cache.js

@@ -0,0 +1,5 @@
+import {InMemoryClientCache} from '@stellar-expert/client-cache'
+
+const apiCache = new InMemoryClientCache({prefix: 'ac:'})
+
+export default apiCache

package/api/explorer-api-call.js

@@ -0,0 +1,37 @@
+/**
+ * Retrieve data from the server API endpoint.
+ * @param {string} endpointWithQuery
+ * @return {Promise<Object>}
+ */
+export async function fetchExplorerApi(endpointWithQuery) {
+    const url = `${explorerApiOrigin}/explorer/${endpointWithQuery}`
+    try {
+        const resp = await fetch(url)
+        if (!resp.ok) {
+            let errorExt
+            try {
+                errorExt = await resp.json()
+            } catch (parsingError) {
+                errorExt = {}
+            }
+            const err = new Error(errorExt?.error || resp.statusText || 'Failed to fetch data from the server')
+            err.status = resp.status
+            err.ext = errorExt
+            throw err
+        }
+        return await resp.json()
+    } catch (e) {
+        console.error(e)
+        if (e instanceof Error) {
+            e = {
+                error: e.message,
+                status: e.status || 500,
+                ext: e.ext
+            }
+        }
+        if (e.ext && e.ext.status) {
+            e.status = e.ext.status
+        }
+        return e
+    }
+}

package/api/explorer-api-hooks.js

@@ -0,0 +1,202 @@
+import {useEffect, useState} from 'react'
+import isEqual from 'react-fast-compare'
+import {stringifyQuery} from '@stellar-expert/navigation'
+import {addVisibilityChangeListener, isDocumentVisible} from '../state/page-visibility-helpers'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+import apiCache from './api-cache'
+
+export class ExplorerApiResult {
+    constructor(apiEndpoint, data, ts) {
+        this.apiEndpoint = apiEndpoint
+        this.data = data
+        this.fetchedAt = ts
+    }
+
+    /**
+     * Relative API URL
+     * @type {String}
+     */
+    apiEndpoint
+
+    /**
+     * API response data
+     * @type {Object}
+     */
+    data = null
+
+    /**
+     * Response error if any
+     * @type {String}
+     */
+    error
+
+    /**
+     * @type {Number}
+     */
+    status = 200
+
+    /**
+     * Response timestamp
+     * @type {Number}
+     */
+    fetchedAt = 0
+
+    /**
+     * Response result
+     * @return {Boolean}
+     */
+    get loaded() {
+        return !!this.data || !!this.error
+    }
+
+    /**
+     * @private
+     */
+    update(data) {
+        this.data = data
+    }
+}
+
+function buildApiResult(apiEndpoint, data, ts) {
+    return new ExplorerApiResult(apiEndpoint, data, ts)
+}
+
+function buildApiError(apiEndpoint, error, status) {
+    const res = new ExplorerApiResult(apiEndpoint, null, Math.round(new Date().getTime() / 1000))
+    res.error = error
+    res.status = status
+    return res
+}
+
+function setupAutoRefresh(refreshInterval, fetchData) {
+    if (!refreshInterval) return () => null
+
+    let autoRefreshTimer,
+        refreshedAt = 0
+
+    function scheduleAutoRefresh() {
+        autoRefreshTimer = setInterval(() => {
+            //refresh only when the tab is active
+            if (isDocumentVisible()) {
+                const now = new Date().getTime()
+                if (refreshedAt + (refreshInterval - 1) * 1000 < now) {
+                    refreshedAt = now
+                    fetchData()
+                }
+            } else {
+                stopAutoRefresh()
+            }
+        }, refreshInterval * 1000)
+    }
+
+    function stopAutoRefresh() {
+        clearInterval(autoRefreshTimer)
+        autoRefreshTimer = undefined
+    }
+
+    const stopVisibilityTracking = addVisibilityChangeListener(visible => {
+        if (visible) {
+            scheduleAutoRefresh()
+        } else {
+            stopAutoRefresh()
+        }
+    })
+    if (isDocumentVisible()) {
+        scheduleAutoRefresh()
+    }
+    //return finalizer
+    return function () {
+        refreshInterval = 0
+        stopVisibilityTracking()
+        stopAutoRefresh()
+    }
+}
+
+const currentRequests = {}
+
+export function fetchData(url, ttl, processResult) {
+    //try to retrieve data from the browser cache
+    const fromCache = apiCache.get(url)
+    //check if the cache is fresh enough
+    if (fromCache && !fromCache.isExpired) {
+        //if the cached data is up to date - just proceed with it
+        return Promise.resolve({data: fromCache.data, ts: fromCache.ts})
+    }
+    const existingRequest = currentRequests[url]
+    if (existingRequest) return existingRequest
+    //fetch from the server only if there is no data or it is expired
+    return currentRequests[url] = fetchExplorerApi(url)
+        .then(data => {
+            if (typeof processResult === 'function') {
+                data = processResult(data)
+            }
+            //in case of error set small ttl in order to try re-fetching in 4 seconds
+            const {ts} = apiCache.set(url, data, data.error ? 4 : ttl)
+            delete currentRequests[url]
+            return {data, ts}
+        })
+}
+
+/**
+ *
+ * @param {String|APIEndpointParams} apiEndpoint - Server API endpoint to use as a data source.
+ * @param {Number} [refreshInterval] - Auto-refresh interval in seconds for dynamic data.
+ * @param {Number} [ttl] - Cache time-to-live in seconds.
+ * @param {Function} [processResult] - Callback to process a fetch result.
+ * @param {Boolean} [allowStaleDataTransition] - Allow stale data to be returned when the url changed and the new data has not been loaded yet.
+ * @return {ExplorerApiResult}
+ */
+export function useExplorerApi(apiEndpoint, {refreshInterval, ttl = 60, processResult, allowStaleDataTransition = false} = {}) {
+    const endpointWithQuery = `${getCurrentStellarNetwork()}/${apiEndpoint}`
+    const [apiResponseData, updateApiResponseData] = useState(buildApiResult(endpointWithQuery))
+    useEffect(() => {
+        let componentUnmounted = false
+        updateApiResponseData(buildApiResult(endpointWithQuery))
+
+        if (!apiEndpoint) {
+            updateApiResponseData(buildApiError(endpointWithQuery, 'Not found', 404))
+            return
+        }
+
+        if (typeof apiEndpoint !== 'string') {
+            apiEndpoint = apiEndpoint.path + stringifyQuery(apiEndpoint.query)
+        }
+
+        function load() {
+            fetchData(endpointWithQuery, ttl, processResult)
+                .then(({data, ts}) => {
+                    if (componentUnmounted) return
+
+                    const newData = buildApiResult(endpointWithQuery, data, ts)
+
+                    if (!isEqual(newData, apiResponseData)) {
+                        updateApiResponseData(newData)
+                    }
+                })
+        }
+
+        if (!componentUnmounted) {
+            load()
+        }
+
+        //set up auto-refresh
+        const stopAutoRefresh = setupAutoRefresh(refreshInterval, load)
+
+        return () => {
+            //finalize
+            componentUnmounted = true
+            stopAutoRefresh()
+        }
+    }, [apiEndpoint])
+    if (apiResponseData.apiEndpoint !== endpointWithQuery && !allowStaleDataTransition)
+        return buildApiResult(endpointWithQuery) //return empty result on URL transition if allowStaleDataTransition not set
+
+    return apiResponseData
+}
+
+/**
+ * @typedef {Object} APIEndpointParams
+ * @property {String} path
+ * @property {Object} query
+ */