@stellar-expert/ui-framework 1.9.0

package/horizon/horizon-account-helpers.js

@@ -0,0 +1,104 @@
+import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
+
+/**
+ * Retrieve account status from Horizon
+ * @param {String} accountAddress
+ * @returns {Promise<AccountResponse>}
+ */
+export function loadAccount(accountAddress) {
+    return initHorizon()
+        .loadAccount(accountAddress)
+}
+
+/**
+ * Load assets issued by the account from Horizon
+ * @param {String} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadIssuedAssets(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().assets().forIssuer(account).limit(200), queryParams)
+    return query.call()
+        .then(({records}) => {
+            if (records && records.length) {
+                records.sort((a, b) => a.asset_code - b.asset_code)
+            }
+            return records || []
+        })
+}
+
+/**
+ * Load offer from Horizon for the particular account
+ * @param {String} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountOffers(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().offers().forAccount(account), queryParams)
+    return loadAllHorizonRecords(query)
+        .then(r => r.records)
+}
+
+
+/**
+ * Load pending claimable balances for a given account pubkey
+ * @param {String} account - Account address
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountClaimableBalances(account) {
+    return initHorizon().claimableBalances()
+        .claimant(account)
+        .limit(100)
+        .call()
+        .then(r => r.records)
+}
+
+/**
+ * Detect account lock status based on the signers configuration
+ * @param {AccountResponse} account - Account info from Horizon
+ * @returns {'unlocked'|'locked'|'partially locked'}
+ */
+export function getAccountLockStatus(account) {
+    const {high_threshold, med_threshold, low_threshold} = account.thresholds
+
+    //calculate the sum of all signers weights
+    const totalSignersWeight = account.signers.reduce((res, signer) => res + signer.weight, 0)
+
+    if (totalSignersWeight > 0) {
+        //compare it with med_threshold and high_threshold
+        if (totalSignersWeight >= med_threshold || totalSignersWeight >= high_threshold) {
+            return 'unlocked'
+        } else if (totalSignersWeight >= low_threshold) {
+            return 'partially locked'
+        }
+    }
+    return 'locked'
+}
+
+/**
+ * Retrieve balance for a given Horizon account info
+ * @param {AccountResponse} account - Account Horizon info
+ * @param {{code: String, issuer: String}} asset - Asset or null (for XLM)
+ * @returns {{total: Number, available: Number, [asset]: {code: String, issuer: String}}}
+ */
+export function getAccountBalance(account, asset = null) {
+    if (!account.balances) return {asset, total: 0, available: 0}
+    const assetBalance = account.balances.find(b => (!asset && b.asset_type === 'native') ||
+            (b.asset_issuer === asset.issuer && b.asset_code === asset.code)),
+        res = {asset, total: 0, available: 0}
+
+    if (assetBalance) {
+        res.total = parseFloat(assetBalance.balance)
+        res.available = res.total - parseFloat(assetBalance.selling_liabilities)
+        if (!asset) { //for XLM we also need to check reserved amount
+            res.available -= (parseInt(account.subentry_count) + 2) * baseReserve
+        }
+    } else if (asset && asset.issuer === account.address) {
+        res.total = res.available = 922337203685
+    }
+
+    return res
+}
+
+
+

package/horizon/horizon-client-helpers.js

@@ -0,0 +1,52 @@
+import {Horizon} from '@stellar/stellar-sdk'
+
+export function initHorizon() {
+    return new Horizon.Server(window.horizonOrigin)
+}
+
+/**
+ * Load all data from the horizon query using next() iteration
+ * @param {CallBuilder} query
+ * @return {Promise<Object[]>}
+ */
+export async function loadAllHorizonRecords(query) {
+    let res = []
+    let response = await query.call()
+    while (true) {
+        const {records = []} = response
+        const limitParam = (query.url.query() || '')
+            .split('&')
+            .find(q => q.indexOf('limit=') === 0)
+        const limit = (limitParam && parseInt(limitParam.split('=')[1])) || 10
+        if (!records.length) break
+        res = res.concat(records)
+        if (records.length < limit) break
+        response = await response.next()
+    }
+    return {records: res}
+}
+
+/**
+ * @typedef {Object} ListQueryParams
+ * @property {string} [cursor] - Paging cursor.
+ * @property [('asc'|'desc'))] [order] - Sort order.
+ * @property {number} [limit] - Page size (200 by default).
+ */
+
+/**
+ * Apply list query parameters to horizon query
+ * @param {object} query - Horizon query.
+ * @param {object} queryParameters - Parameters to apply.
+ * @return {object}
+ */
+export function applyListQueryParameters(query, queryParameters) {
+    const {cursor, order, limit = 200} = queryParameters || {}
+    if (cursor) {
+        query.cursor(cursor)
+    }
+    if (order) {
+        query.order(order || 'asc')
+    }
+    query.limit(limit)
+    return query
+}

package/horizon/horizon-ledger-helpers.js

@@ -0,0 +1,36 @@
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+
+/**
+ * Load ledgers from Horizon
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadLedgers(queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().ledgers(), queryParams)
+    return query.call()
+        .then(r => r.records)
+}
+
+/**
+ * Load ledger by its sequence
+ * @param {Number} sequence - Sequence of the ledger to fetch
+ * @return {Object}
+ */
+export function loadLedger(sequence) {
+    return initHorizon().ledgers()
+        .ledger(sequence)
+        .call()
+}
+
+/**
+ * Stream ledgers from Horizon
+ * @param {String} cursor - Cursor to start from
+ * @param {Function} onNewLedger - Callback to invoke when new ledger arrives
+ * @return {Function}
+ */
+export function streamLedgers(cursor, onNewLedger) {
+    return initHorizon().ledgers()
+        .order('asc')
+        .cursor(cursor || 'now')
+        .stream({onmessage: ledger => onNewLedger(ledger)})
+}

package/horizon/horizon-orderbook-helpers.js

@@ -0,0 +1,14 @@
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {applyListQueryParameters, initHorizon} from './horizon-client-helpers'
+
+/**
+ * Load orderbook for assets.
+ * @param {object} selling - Selling asset.
+ * @param {object} buying - Buying asset.
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional).
+ * @return {Promise<Array<object>>}
+ */
+export function loadOrderbook(selling, buying, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().orderbook(AssetDescriptor.parse(selling).toAsset(), AssetDescriptor.parse(buying).toAsset()), queryParams)
+    return query.call()
+}

package/horizon/horizon-trades-helper.js

@@ -0,0 +1,89 @@
+import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+
+/**
+ * Load offer from Horizon for the particular account
+ * @param {AssetDescriptor} baseAsset - Base asset descriptor
+ * @param {AssetDescriptor} counterAsset - Counter asset descriptor
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadMarketTrades(baseAsset, counterAsset, queryParams = null) {
+    const q = initHorizon().trades()
+        .forAssetPair(baseAsset.toAsset(), counterAsset.toAsset())
+    const query = applyListQueryParameters(q, queryParams)
+    return query.call()
+        .then(r=>r.records)
+}
+
+
+/**
+ * Stream trades from Horizon
+ * @param {String} cursor - Cursor to start from
+ * @param {AssetDescriptor} baseAsset - Base asset descriptor
+ * @param {AssetDescriptor} counterAsset - Counter asset descriptor
+ * @param {Function} onNewTrade - Callback to invoke when new trade arrives
+ * @return {Function}
+ */
+export function streamMarketTrades(cursor, baseAsset, counterAsset, onNewTrade) {
+    return initHorizon().trades()
+        .forAssetPair(baseAsset.toAsset(), counterAsset.toAsset())
+        .order('asc')
+        .cursor(cursor || 'now')
+        .stream({onmessage: op => onNewTrade(op)})
+}
+
+
+/**
+ * Stream all trades from Horizon
+ * @param {String} cursor - Cursor to start from
+ * @param {Function} onNewTrade - Callback to invoke when new trade arrives
+ * @return {Function}
+ */
+export function streamTrades(cursor, onNewTrade) {
+    return initHorizon().trades()
+        .order('asc')
+        .cursor(cursor || 'now')
+        .limit(200)
+        .stream({onmessage: op => onNewTrade(op)})
+}
+
+
+/**
+ *
+ * @param {String|AssetDescriptor|Asset} base - Base asset
+ * @param {String|AssetDescriptor|Asset} counter - Counter asset
+ * @param {('5m'|'15m'|'1h'|'1d'|'1w')} resolution - Segment duration
+ * @param {Number} period - Period in days
+ * @param {Number} [limit] - Max number of records to fetch
+ * @return {Promise<TradeAggregationRecord>}
+ */
+export function loadTradesAggregation({base, counter, resolution, period, limit = 200}) {
+    let res
+    switch (resolution) {
+        case '5m':
+            res = 300000
+            break
+        case '15m':
+            res = 900000
+            break
+        case '1h':
+            res = 3600000
+            break
+        case '1d':
+            res = 86400000
+            break
+        case '1w':
+            res = 604800000
+            break
+        default:
+            throw new Error(`Not supported trades aggregation resolution: ${resolution}`)
+    }
+    const endTime = new Date().getTime(),
+        startTime = endTime - period * 24 * 60 * 60 * 1000
+
+    return initHorizon()
+        .tradeAggregation(AssetDescriptor.parse(base).toAsset(), AssetDescriptor.parse(counter).toAsset(), startTime, endTime, res, 0)
+        .limit(limit)
+        .call()
+}

package/horizon/horizon-transaction-helpers.js

@@ -0,0 +1,36 @@
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+
+/**
+ * Load transactions from Horizon
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadTransactions(queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().transactions().includeFailed(queryParams && !!queryParams.includeFailed), queryParams)
+    return query.call()
+        .then(r => r.records)
+}
+
+/**
+ * Stream operations from Horizon
+ * @param {String} cursor - Cursor to start from
+ * @param {Function} onNewTx - Callback to invoke when new operation arrives
+ * @param {Boolean} includeFailed - Include failed transactions into the stream
+ * @return {Function}
+ */
+export function streamTransactions(cursor, onNewTx, includeFailed) {
+    return initHorizon().transactions().includeFailed(!!includeFailed)
+        .order('asc')
+        .cursor(cursor || 'now')
+        .stream({onmessage: op => onNewTx(op)})
+}
+
+/**
+ * Submit transaction to Horizon
+ * @param {Transaction} tx
+ * @returns {Promise<Horizon.SubmitTransactionResponse>}
+ */
+export function submitTransaction(tx) {
+    return initHorizon()
+        .submitTransaction(tx)
+}

package/index.js

@@ -0,0 +1,85 @@
+import './index.scss'
+
+window.explorerFrontendOrigin = window.explorerFrontendOrigin || 'https://stellar.expert'
+window.explorerApiOrigin = window.explorerApiOrigin || 'https://api.stellar.expert'
+window.horizonOrigin = window.horizonOrigin || 'https://horizon.stellar.org'
+
+//modules
+export * from './module/dynamic-module'
+//state management and utils
+export * from './state/state-hooks'
+export * from './state/on-screen-hooks'
+export * from './state/stellar-network-hooks'
+export * from './state/screen-orientation-hooks'
+export * from './state/page-visibility-helpers'
+export * from './state/theme'
+export * from './meta/page-meta-tags'
+//explorer API bindings
+export * from './api/explorer-api-hooks'
+export * from './api/explorer-api-paginated-list-hooks'
+export * from './api/explorer-tx-api'
+//Horizon API binding and utils
+export * from './stellar/ledger-generic-id'
+export * from './horizon/horizon-client-helpers'
+export * from './horizon/horizon-ledger-helpers'
+export * from './horizon/horizon-transaction-helpers'
+export * from './horizon/horizon-account-helpers'
+export * from './horizon/horizon-orderbook-helpers'
+export * from './horizon/horizon-trades-helper'
+//basic UI controls
+export * from './controls/button'
+export * from './controls/button-group'
+export * from './controls/info-tooltip'
+export * from './controls/tooltip'
+export * from './controls/update-highlighter'
+export * from './controls/tabs'
+export * from './controls/dropdown'
+export * from './controls/code-block'
+export * from './controls/slider'
+export * from './controls/external-link'
+export * from './toast/toast-notifications-block'
+export * from './errors/error-boundary'
+//interaction
+export * from './interaction/autofocus'
+export * from './interaction/block-select'
+export * from './interaction/copy-to-clipboard'
+export * from './interaction/spoiler'
+export * from './interaction/theme-selector'
+export * from './interaction/inline-progress'
+export * from './interaction/responsive'
+export * from './interaction/qr-code'
+//date components
+export * from './date/utc-timestamp'
+export * from './date/elapsed-time'
+export * from './date/date-selector'
+//ledger-entries-related components
+export * from './ledger/ledger-entry-link'
+export * from './ledger/ledger-entry-href-formatter'
+//account-related components
+export * from './account/identicon'
+export * from './account/account-address'
+export * from './account/signer-key'
+export * from './account/available-balance'
+//asset-related components
+export * from './asset/asset-link'
+export * from './asset/asset-issuer'
+export * from './asset/asset-icon'
+export * from './asset/asset-selector'
+export * from './asset/amount'
+export * from './asset/asset-meta-hooks'
+export * from './asset/asset-list-hooks'
+//claimable-balance-related components
+export * from './claimable-balance/claimable-balance-claimants'
+//DEX-related components
+export * from './dex/price-dynamic'
+//directory-related components
+export * from './directory/directory-hooks'
+//transaction/operation/effects components
+export * from './tx/tx-operations-list'
+export * from './tx/parser/tx-details-parser'
+export * from './tx/tx-list-hooks'
+export * from './effect/effect-description'
+//Stellar-specific utils
+export * from './stellar/key-type'
+export * from './stellar/signature-hint-utils'
+export * from './contract/wasm-section-parser'

package/index.scss

@@ -0,0 +1,16 @@
+@import "basic-styles/variables";
+@import "basic-styles/themes";
+@import "basic-styles/scrollbars";
+@import "basic-styles/base";
+@import "fonts/font";
+@import "fonts/icons/icons-embedded";
+@import "controls/active-icon";
+@import "basic-styles/link";
+@import "basic-styles/grid";
+@import "basic-styles/loader";
+@import "basic-styles/typography";
+@import "basic-styles/spacing";
+@import "basic-styles/form";
+@import "basic-styles/lists";
+@import "basic-styles/table";
+@import "basic-styles/responsive";

package/interaction/autofocus.js

@@ -0,0 +1,9 @@
+export function useAutoFocusRef(inputRef) {
+    if (!inputRef)
+        return
+    setTimeout(() => {
+        if (document.body.contains(inputRef)) {
+            inputRef.focus()
+        }
+    }, 200)
+}

package/interaction/block-select.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './block-select.scss'
+
+function select(target) {
+    //handle textarea and inputs
+    if (target.nodeName.match(/^(INPUT|TEXTAREA)$/i)) {
+        target.focus()
+        target.select()
+        return
+    }
+    //handle selection inside text elements
+    const range = document.createRange()
+    range.selectNodeContents(target)
+    const sel = window.getSelection()
+    if (typeof sel.setBaseAndExtent === 'function') {
+        // Safari
+        sel.setBaseAndExtent(target, 0, target, 1)
+    }
+    sel.removeAllRanges()
+    sel.addRange(range)
+}
+
+export const BlockSelect = React.memo(function BlockSelect({as = 'span', children, title, className, wrap, inline, style, ...op}) {
+    const props = {
+        className: cn('block-select', className),
+        onFocus: e => select(e.target),
+        tabIndex: '-1',
+        style,
+        title,
+        ...op
+    }
+    if (wrap) {
+        props.style = {...props.style, whiteSpace: 'normal', overflow: 'visible'}
+    }
+    if (wrap === false) {
+        props.style = {...props.style, whiteSpace: 'nowrap', overflow: 'hidden'}
+    }
+    if (inline) {
+        props.style = {...props.style, display: 'inline'}
+    }
+    return React.createElement(as, props, children)
+})
+
+BlockSelect.propTypes = {
+    children: PropTypes.any.isRequired,
+    title: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    wrap: PropTypes.bool,
+    inline: PropTypes.bool,
+    as: PropTypes.string
+}

package/interaction/block-select.scss

@@ -0,0 +1,24 @@
+@use "../basic-styles/variables";
+
+.block-select {
+  display: inline-block;
+  width: auto;
+  overflow: auto;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+
+  &:focus {
+    outline: none;
+  }
+
+  &textarea {
+    width: 100%;
+    height: 7em;
+    margin: 0;
+    resize: vertical;
+
+    &.code {
+      font-family: $font-face-mono;
+    }
+  }
+}

package/interaction/copy-to-clipboard.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {CopyToClipboard as Copy} from 'react-copy-to-clipboard'
+
+export const CopyToClipboard = React.memo(function CopyToClipboard({text, children, title}) {
+    return <Copy text={text}>
+        {children ? children : <a href="#" className="icon-copy active-icon" title={title}/>}
+    </Copy>
+})
+
+CopyToClipboard.defaultProps = {
+    title: 'Copy to clipboard'
+}
+
+CopyToClipboard.propTypes = {
+    text: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    children: PropTypes.any
+}

package/interaction/inline-progress.js

@@ -0,0 +1,16 @@
+import React, {useEffect, useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+
+export const InlineProgress = React.memo(function InlineProgress({dots = 5}) {
+    const [progress, setProgress] = useState(0),
+        intervalRef = useRef(0)
+    useEffect(() => {
+        intervalRef.current = setInterval(() => setProgress(p => ++p), 500)
+        return () => clearInterval(intervalRef.current)
+    }, [])
+    return <span>{'.'.repeat(progress % (dots + 1))}</span>
+})
+
+InlineProgress.propTypes = {
+    dots: PropTypes.number
+}

package/interaction/qr-code.js

@@ -0,0 +1,45 @@
+import React, {useMemo, useRef} from 'react'
+import QR from 'qrcode.react'
+
+/**
+ * QrCode renderer
+ * @param {String} value - Value to encode
+ * @param {String} [caption] - Additional caption under QR code
+ * @param {Number} [size] - Width|height fo the rendered QR code image
+ * @param {String} [embeddedImage] - Optional logo to render in the center of QR code
+ * @param {Number} [embeddedSize] - Embeded logo size (by default 10% of QR code size)
+ * @return {JSX.Element}
+ */
+export const QrCode = React.memo(function QrCode({value, caption, size = 320, embeddedImage, embeddedSize}) {
+    const foreground = useMemo(() => getComputedStyle(document.documentElement).getPropertyValue('--color-primary'))
+    const containerRef = useRef()
+    return <div className="text-center" ref={containerRef}>
+        <QR value={value} size={256} level="Q" includeMargin imageSettings={embedImage(embeddedImage, embeddedSize, size)}
+            fgColor={foreground} style={{width: size + 'px', height: size + 'px', display: 'block', margin: 'auto'}}/>
+        {!!caption && <div className="text-small dimmed condensed word-break">{caption}</div>}
+    </div>
+})
+
+function embedImage(src, size, qrSize) {
+    if (!src)
+        return undefined
+    if (!size) {
+        size = qrSize * 0.1
+    }
+    return {
+        src,
+        height: size,
+        width: size,
+        excavate: true
+    }
+}
+
+function download(container, caption) {
+    const canvas = container.querySelector('canvas')
+    const link = document.createElement('a')
+    link.href = canvas.toDataURL()
+    link.download = caption ? caption.replace(/\W+/g, '-') + '-qr.png' : `qr${new Date().getTime()}.png`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+}

package/interaction/responsive.js

@@ -0,0 +1,21 @@
+import {useState, useEffect} from 'react'
+import {throttle} from 'throttle-debounce'
+
+/**
+ * Measures window client width
+ * @return {Number}
+ */
+export function useWindowWidth() {
+    const [width, setWidth] = useState(window.innerWidth)
+
+    const onResize = throttle(100, function () {
+        setWidth(window.innerWidth)
+    })
+
+    useEffect(() => {
+        window.addEventListener('resize', onResize)
+        return () => window.removeEventListener('resize', onResize)
+    }, [])
+
+    return width
+}

package/interaction/spoiler.js

@@ -0,0 +1,40 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './spoiler.scss'
+
+export const Spoiler = React.memo(function Spoiler({expanded, showMore = 'Show more', showLess = 'Show less', onChange, className, micro, style, active, children}) {
+    const [expandedState, setExpandedState] = useState(expanded || false)
+    useEffect(() => {
+        setExpandedState(expanded)
+    }, [expanded])
+
+    const toggle = useCallback(() => {
+        setExpandedState(prevState => {
+            const newState = !prevState
+            setExpandedState(newState)
+            onChange && onChange({expanded: newState})
+        })
+    }, [onChange])
+
+    const text = expandedState ? showLess : showMore
+    return <>
+        <span className={cn('spoiler', className)}>
+            <a href="#" className={!active ? 'dimmed' : undefined} title={micro ? text : undefined} style={style} onClick={toggle}>
+                {!micro && <span className="spoiler-text">{text}</span>}
+                <i className={`icon ${expandedState ? 'icon-less' : 'icon-more'}`}/>
+            </a>
+        </span>
+        {expandedState ? children : null}
+    </>
+})
+
+Spoiler.propTypes = {
+    expanded: PropTypes.bool,
+    micro: PropTypes.bool,
+    onChange: PropTypes.func,
+    showMore: PropTypes.string,
+    showLess: PropTypes.string,
+    active: PropTypes.bool,
+    style: PropTypes.object
+}