@stellar-expert/ui-framework 1.9.0

package/asset/asset-link.js

@@ -0,0 +1,93 @@
+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] - Wheter 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 {
+            children = <>
+                <AssetWarningStatus meta={meta}/>
+                {icon !== false && <AssetIcon asset={asset}/>}
+                {!!asset.code && asset.code}
+                {!!asset.isContract && <AccountAddress account={asset.contract} chars={8} link={false} icon={false}/>}
+                {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-link.scss

@@ -0,0 +1,26 @@
+.asset-link {
+  white-space: nowrap;
+
+  .asset-issuer {
+    color: var(--color-dimmed);
+    font-size: 0.65em;
+    padding-left: 0.1em;
+  }
+
+  .asset-icon {
+    display: inline-block;
+    color: var(--color-text);
+    width: 1.1em;
+    height: 1.1em;
+    vertical-align: middle;
+    margin-right: .1em;
+    line-height: 1.1;
+    background: transparent center center no-repeat;
+    background-size: contain;
+    margin-top: -0.2em;
+
+    &.icon {
+      margin-top: 0;
+    }
+  }
+}

package/asset/asset-list-hooks.js

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

package/asset/asset-meta-hooks.js

@@ -0,0 +1,78 @@
+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) {
+    asset = normalizeAssetName(asset)
+    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 => !unloaded && setAssetInfo(a))
+        return () => {
+            unloaded = true
+        }
+    }, [asset])
+
+    return assetInfo
+}

package/asset/asset-selector.js

@@ -0,0 +1,72 @@
+import React, {useCallback, useRef, useState} from 'react'
+import {Dropdown} from '../controls/dropdown'
+import {AssetLink} from './asset-link'
+import {useAssetList} from './asset-list-hooks'
+import './asset-selector.scss'
+
+/**
+ * @param {AssetSelectorOnAssetChanged} onChange - On asset selected callback
+ * @param {String} [value] - Selected asset
+ * @param {String[]} [predefinedAssets] - Optional lists of predefined assets that should be shown at the top of the dropdown list
+ * @param {Boolean} [restricted] - If set, the selector is limited to the predefined assets list only
+ * @param {String} [title] - Dropdown selector title
+ * @param {String} [expanded] - Expanded by default
+ * @return {JSX.Element}
+ * @constructor
+ */
+export function AssetSelector({value, predefinedAssets, onChange, restricted, title, expanded}) {
+    const [search, setSearch] = useState('')
+    const searchRef = useRef()
+    const options = []
+
+    const focusSearch = useCallback(() => {
+        setTimeout(() => searchRef.current?.focus(), 200)
+    })
+
+    if (predefinedAssets) {
+        for (const asset of predefinedAssets) {
+            options.push({
+                value: asset,
+                title: <AssetLink link={false} asset={asset}/>,
+                hidden: search && !asset.split('-')[0].toLowerCase().includes(search.toLowerCase())
+            })
+        }
+    }
+
+    let loadNextPage
+    if (!restricted) {
+        const {assets, loadPage, loading} = useAssetList({search: search?.trim() || undefined})
+        for (let {asset} of assets) {
+            if (!predefinedAssets || !predefinedAssets.includes(asset)) {
+                options.push({value: asset, title: <AssetLink link={false} asset={asset}/>})
+            }
+        }
+        if (!options.filter(opt => !opt.hidden).length) {
+            if (loading) {
+                options.push({value: '...', disabled: true, title: <div className="loader"/>})
+            } else {
+                options.push({
+                    value: 'no',
+                    disabled: true,
+                    title: <div className="dimmed text-center text-small">(not found)</div>
+                })
+            }
+        }
+        loadNextPage = loadPage
+    }
+
+    return <Dropdown solo className="asset-selector" options={options} value={value} onOpen={focusSearch} title={title} expanded={expanded}
+                     showToggle={!title} onChange={onChange} onScroll={e => e.rel === 'bottom' && loadNextPage?.call(this)} header={<>
+        <h3>Select an asset</h3>
+        <div className="relative">
+            <input type="text" value={search} ref={searchRef} onChange={e => setSearch(e.target.value)}
+                   placeholder="Search by asset code or website"/>
+            <i className="icon-search dimmed"/>
+        </div>
+    </>}/>
+}
+
+/**
+ * @callback AssetSelectorOnAssetChanged
+ * @param {String} value
+ */

package/asset/asset-selector.scss

@@ -0,0 +1,41 @@
+.asset-selector {
+  .dd-header {
+    .asset-issuer {
+      display: none;
+    }
+  }
+
+  .dd-list {
+    width: 22em;
+    max-width: 94vw;
+  }
+
+  .dd-list-header {
+    min-width: 16em;
+
+    h3 {
+      margin: 0;
+    }
+
+    .icon-search {
+      position: absolute;
+      right: 0.3em;
+      top: 0.5em;
+      opacity: 0.5;
+      font-size: $font-size-base;
+    }
+
+    input {
+      margin-bottom: 0;
+
+      &:not(:placeholder-shown) + .icon-search {
+        display: none;
+      }
+
+      &::placeholder {
+        font-size: 0.85em;
+        line-height: 1;
+      }
+    }
+  }
+}

package/basic-styles/base.scss

@@ -0,0 +1,53 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+* {
+  @include scrollbars(6px, var(--color-dimmed), var(--color-contrast-border));
+}
+
+html {
+  font-size: 62.5%;
+  height: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-family: $font-face-primary;
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  letter-spacing: 0.01em;
+  line-height: $font-line-height-base;
+  height: 100%;
+  overflow-x: hidden;
+  min-width: 320px;
+  margin: 0;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+}
+
+@include scrollbars(6px, var(--color-dimmed), var(--color-contrast-border));
+
+::selection {
+  background-color: transparentize($color-primary, 0.8) !important;
+  color: var(--color-text);
+}
+
+.page-container {
+  min-height: calc(100vh - 8rem);
+  display: flex;
+  flex-direction: column;
+  /*@media (min-width: $responsive-mobile-browser-width) {
+    justify-content: center;
+  }*/
+
+  > .no-center {
+    margin-bottom: auto;
+  }
+}

package/basic-styles/form.scss

@@ -0,0 +1,90 @@
+input:not([type=checkbox],[type=radio],[type=range]),
+textarea,
+select,
+.input-like {
+  appearance: none;
+  background-color: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid var(--color-contrast-border) !important;
+  box-shadow: none;
+  box-sizing: inherit;
+  height: 4rem;
+  font-size: $font-size-base;
+  font-family: $font-face-primary;
+  color: var(--color-text);
+  padding: 0.6rem;
+  width: 100%;
+  transition: border-bottom-color 0.2s;
+
+  &:focus {
+    background-color: var(--color-alt-bg) !important;
+    border-bottom-color: var(--color-highlight) !important;
+    outline: 0;
+  }
+}
+
+input[type=range] {
+  height: 2px;
+  width: 100%;
+  margin: 0;
+  filter: grayscale(100%);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  display: inline;
+  margin-left: 0;
+  filter: grayscale(100%);
+}
+
+input[type=checkbox] {
+  vertical-align: bottom;
+  position: relative;
+  top: -0.3em;
+  padding: 0;
+  margin: 0;
+}
+
+input[type='text'].key {
+  letter-spacing: -0.05em;
+  font-family: $font-face-mono;
+  @media (max-width: 519px) {
+    font-size: 0.9em;
+  }
+
+  &::placeholder {
+    letter-spacing: 0;
+    font-size: $font-size-base;
+    font-family: $font-face-primary;
+  }
+}
+
+.input-like {
+  min-height: 4rem;
+  height: auto;
+}
+
+textarea {
+  min-height: 4em;
+
+  &.no-resize {
+    resize: none;
+  }
+}
+
+label,
+legend {
+  display: block;
+  font-size: $font-size-base;
+  margin-bottom: $space-nano;
+}
+
+.label-inline {
+  display: inline-block;
+  font-weight: normal;
+  margin-left: $space-nano;
+}
+
+::placeholder {
+  color: var(--color-dimmed);
+}