@stellar-expert/ui-framework 1.9.0

package/controls/tooltip.js

@@ -0,0 +1,214 @@
+import React, {useState, useRef} from 'react'
+import cn from 'classnames'
+import './tooltip.scss'
+
+/**
+ * Compute tooltip position
+ * @param {EventTarget} target - Mouse hover target
+ * @param {Element} node - Tooltip object
+ * @param {'top'|'bottom'|'left'|'right'} desiredPlace - Desired tooltip place
+ * @param {Object} offset
+ * @return {{place: String, position: {top: Number, left: Number}}}
+ */
+function calculateTooltipPosition(target, node, desiredPlace, offset) {
+    //dimensions of node and target
+    const {width: tipWidth, height: tipHeight} = getBoundingRect(node),
+        {width: targetWidth, height: targetHeight} = getBoundingRect(target)
+    //mouse offset
+    const {mouseX, mouseY} = getMouseOffset(target),
+        {offsetX, offsetY} = parseOffset(offset),
+        defaultOffset = getDefaultPosition(targetWidth, targetHeight, tipWidth, tipHeight)
+
+    // Get the edge offset of the tooltip
+    function getTipOffsetLeft(place) {
+        return mouseX + defaultOffset[place].l + offsetX
+    }
+
+    function getTipOffsetRight(place) {
+        return mouseX + defaultOffset[place].r + offsetX
+    }
+
+    function getTipOffsetTop(place) {
+        return mouseY + defaultOffset[place].t + offsetY
+    }
+
+    function getTipOffsetBottom(place) {
+        return mouseY + defaultOffset[place].b + offsetY
+    }
+
+    function isOutside(p) {
+        return getTipOffsetLeft(p) < 0 || //outside left
+            getTipOffsetRight(p) > window.innerWidth || //outside right
+            getTipOffsetTop(p) < 0 || //outside top
+            getTipOffsetBottom(p) > window.innerHeight //outside bottom
+    }
+
+    let place
+    if (!isOutside(desiredPlace)) {
+        place = desiredPlace
+    } else {
+        const possiblePlacements = (['top', 'bottom', 'left', 'right']).filter(p => !isOutside(p))
+        if (possiblePlacements.length > 0 && isOutside(desiredPlace)) {
+            place = possiblePlacements[0]
+        }
+    }
+
+    const {top: parentTop, left: parentLeft} = target.getBoundingClientRect()
+
+    return {
+        place,
+        position: {
+            top: (getTipOffsetTop(place) - parentTop) | 0,
+            left: (getTipOffsetLeft(place) - parentLeft) | 0
+        }
+    }
+}
+
+/**
+ * @param {Element} node
+ * @return {PositionRect}
+ */
+function getBoundingRect(node) {
+    const {width, height, top, left} = node.getBoundingClientRect()
+    return {
+        width: width | 0,
+        height: height | 0,
+        top: top | 0,
+        left: left | 0
+    }
+}
+
+/**
+ * @param {Element} element
+ * @return {{mouseX: Number, mouseY: Number}}
+ */
+function getMouseOffset(element) {
+    const {width, height, top, left} = getBoundingRect(element)
+    return {
+        mouseX: (left + (width / 2)) | 0,
+        mouseY: (top + (height / 2)) | 0
+    }
+}
+
+/**
+ * @param {Number} targetWidth
+ * @param {Number} targetHeight
+ * @param {Number} tipWidth
+ * @param {Number} tipHeight
+ *  */
+function getDefaultPosition(targetWidth, targetHeight, tipWidth, tipHeight) {
+    const notchSize = 6
+    return {
+        top: {
+            l: -tipWidth / 2,
+            r: tipWidth / 2,
+            t: -targetHeight / 2 - tipHeight - notchSize,
+            b: -targetHeight / 2
+        },
+        bottom: {
+            l: -tipWidth / 2,
+            r: tipWidth / 2,
+            t: targetHeight / 2 + notchSize,
+            b: targetHeight / 2 + tipHeight
+        },
+        left: {
+            l: -tipWidth - targetWidth / 2,
+            r: -targetWidth / 2 + notchSize,
+            t: -tipHeight / 2,
+            b: tipHeight / 2
+        },
+        right: {
+            l: targetWidth / 2 + notchSize,
+            r: tipWidth + targetWidth / 2,
+            t: -tipHeight / 2,
+            b: tipHeight / 2
+        }
+    }
+}
+
+/**
+ * @param {PositionOffset} offset
+ * @return {{offsetX: Number, offsetY: Number}}
+ */
+function parseOffset(offset) {
+    let offsetX = 0,
+        offsetY = 0
+
+    for (let key in Object.keys(offset)) {
+        const value = parseInt(offset[key])
+        if (key === 'top') {
+            offsetY -= value
+        } else if (key === 'bottom') {
+            offsetY += value
+        } else if (key === 'left') {
+            offsetX -= value
+        } else if (key === 'right') {
+            offsetX += value
+        }
+    }
+
+    return {offsetX, offsetY}
+}
+
+/**
+ * Tooltip component
+ * @param {any} trigger
+ * @param {PositionDescriptor} desiredPlace
+ * @param {PositionOffset} offset?
+ * @param {String} maxWidth?
+ * @param {any} children?
+ * @constructor
+ */
+export const Tooltip = React.memo(function Tooltip({trigger, desiredPlace = 'top', offset = {}, children, maxWidth = '20em', ...op}) {
+    const [visible, setVisible] = useState(false),
+        [place, setPlace] = useState('top'),
+        [position, setPosition] = useState({top: 0, left: 0}),
+        content = useRef(null)
+
+    function mouseEnter(e) {
+        if (visible) return
+        const {place, position} = calculateTooltipPosition(e.currentTarget, content.current, desiredPlace, offset)
+        setVisible(true)
+        setPosition(position)
+        setPlace(place)
+    }
+
+    function mouseLeave(e) {
+        if (!visible) return
+        setVisible(false)
+    }
+
+    const triggerProps = {
+        onMouseEnter: e => mouseEnter(e),
+        onMouseLeave: e => mouseLeave(e),
+        ...op
+    }
+    const contentStyle = {
+        maxWidth,
+        left: position.left + 'px',
+        top: position.top + 'px'
+    }
+    return React.cloneElement(trigger, triggerProps, <div className="tooltip-wrapper" style={contentStyle}>
+        <div ref={content} className={cn('tooltip', place)}>
+            <div className="tooltip-content">{children}</div>
+        </div>
+    </div>)
+})
+
+/**
+ * @typedef {'top'|'bottom'|'left'|'right'} PositionDescriptor
+ */
+/**
+ * @typedef {Object} PositionRect
+ * @property {Number} top - Top offset
+ * @property {Number} left - Left offset
+ * @property {Number} width - Element width
+ * @property {Number} height - Element height
+ */
+/**
+ * @typedef {Object} PositionOffset
+ * @property {Number} top? - Top offset
+ * @property {Number} bottom? - Bottom offset
+ * @property {Number} left? - Left offset
+ * @property {Number} right? - Right offset
+ */

package/controls/tooltip.scss

@@ -0,0 +1,97 @@
+@use "../basic-styles/variables";
+
+$tooltip-notch-shadow-color: var(--color-border-shadow);
+
+.tooltip-wrapper {
+  width: 30rem;
+  max-width: 30rem;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s;
+  z-index: 10;
+}
+
+.tooltip {
+  position: relative;
+  font-size: 0.9*$font-size-base;
+  font-style: normal;
+  line-height: 1.3;
+  max-width: 30rem;
+  background: var(--color-bg);
+  border-color: var(--color-contrast-border);
+  border-radius: $border-radius-input;
+  box-shadow: 0 2px 4px -1px var(--color-backdrop);
+  padding: 1rem 1.4rem;
+  letter-spacing: normal;
+  word-break: normal;
+
+  &:before {
+    content: "";
+    background: var(--color-bg);
+    height: .8rem;
+    width: .8rem;
+    position: absolute;
+    z-index: 9;
+    transform: rotate(45deg);
+  }
+
+  &.top:before {
+    left: 50%;
+    bottom: -.25em;
+    box-shadow: 1px 1px 0 $tooltip-notch-shadow-color;
+    margin-left: -0.4rem;
+  }
+
+  &.bottom:before {
+    left: 50%;
+    top: -.25em;
+    box-shadow: -1px -1px 0 $tooltip-notch-shadow-color;
+    margin-left: -0.4rem;
+  }
+
+  &.left:before {
+    right: -.25em;
+    top: 50%;
+    margin-top: -0.4em;
+    box-shadow: 1px -1px 0 $tooltip-notch-shadow-color;
+  }
+
+  &.right:before {
+    left: -.25em;
+    top: 50%;
+    margin-top: -0.4em;
+    box-shadow: -1px 1px 0 $tooltip-notch-shadow-color;
+  }
+
+  .tooltip-content {
+    color: var(--color-text);
+    z-index: 5;
+    position: relative;
+  }
+}
+
+.trigger {
+  vertical-align: text-top;
+  font-size: 1.2rem;
+  position: relative;
+  top: -.3rem;
+  left: .2rem;
+  color: var(--color-primary);
+  transition: color 0.15s ease 0.3s;
+
+  &:before {
+    opacity: 0.4;
+  }
+
+  &:hover {
+    &:before {
+      opacity: 1;
+    }
+
+    & > .tooltip-wrapper {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/controls/update-highlighter.js

@@ -0,0 +1,28 @@
+import React, {useRef} from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {useDependantState} from '../state/state-hooks'
+import './update-highlighter.scss'
+
+export const UpdateHighlighter = React.memo(function UpdateHighlighter({children}) {
+    const timerRef = useRef(0)
+    const [active, setActiveState] = useDependantState(() => {
+        //reset the timer in case if previous animation wasn't finished yet
+        if (timerRef.current) {
+            clearTimeout(timerRef.current)
+            useRef.current = 0
+        }
+        //schedule class reset
+        timerRef.current = setTimeout(function () {
+            timerRef.current = 0
+            setActiveState(false)
+        }, 600)
+        return true
+    }, [children])
+
+    return <span className={cn({highlighter: active})}>{children}</span>
+})
+
+UpdateHighlighter.propTypes = {
+    children: PropTypes.any.isRequired
+}

package/controls/update-highlighter.scss

@@ -0,0 +1,10 @@
+@use "../basic-styles/variables";
+
+.highlighter {
+  animation: highlighter 0.6s ease-in;
+}
+
+@keyframes highlighter {
+  from {background-color: transparentize($color-primary, 0.5);}
+  to {background-color: transparent;}
+}

package/date/date-selector.js

@@ -0,0 +1,44 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import {debounce} from 'throttle-debounce'
+import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
+
+export function trimIsoDateSeconds(date) {
+    if (typeof date === 'number') {
+        date = new Date(date)
+    }
+    return date.toISOString().replace(/:\d{2}\.\d*Z/, '')
+}
+
+const minSelectableValue = trimIsoDateSeconds(new Date('2015-09-30T16:46:00Z'))
+
+/**
+ * @param {String} value
+ * @param {Function} onChange
+ * @constructor
+ */
+export function DateSelector({value, onChange, min, max, ref, ...otherProps}) {
+    const [date, setDate] = useState(value ? trimIsoDateSeconds(normalizeDate(value)) : '')
+    useEffect(() => {
+        if (value) {
+            setDate(trimIsoDateSeconds(normalizeDate(value)))
+        } else {
+            setDate('')
+        }
+    }, [value])
+
+    const selectDate = useCallback(debounce(400, function (newDate) {
+        if (value !== newDate) {
+            setDate(newDate)
+            if (onChange) {
+                onChange(toUnixTimestamp(normalizeDate(newDate)))
+            }
+        }
+    }), [onChange, value])
+
+    if (max === undefined) {
+        max = trimIsoDateSeconds(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
+    }
+    return <input type="datetime-local" value={date} className="date-selector condensed" step={60} ref={ref}
+                  min={min || minSelectableValue} max={max} onChange={e => selectDate(e.target.value)}
+                  style={{width: '11em', overflow: 'hidden'}} {...otherProps}/>
+}

package/date/elapsed-time.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import TimeAgo from 'react-timeago'
+
+const timeUnits = {
+    second: 's',
+    minute: 'm',
+    hour: 'h',
+    day: 'd',
+    week: 'w',
+    month: 'mo',
+    year: 'y'
+}
+
+export const ElapsedTime = React.memo(function ElapsedTime({ts, className, suffix}) {
+    const then = Date.parse(ts)
+    return <span className={className}>
+        <TimeAgo date={ts} formatter={(v, unit) => `${v}${timeUnits[unit]}`} now={function () {
+            const now = Date.now()
+            return then > now ? then : now
+        }}/>{suffix}
+    </span>
+})

package/date/utc-timestamp.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {normalizeDate, formatDateUTC} from '@stellar-expert/formatter'
+import {BlockSelect} from '../interaction/block-select'
+
+export const UtcTimestamp = React.memo(function UtcTimestamp({date, dateOnly, className}) {
+    date = normalizeDate(date)
+    let formatted = formatDateUTC(date)
+    if (dateOnly) {
+        formatted = formatted.split(' ')[0]
+    } else {
+        formatted += ' UTC'
+    }
+    const localTime = date.toString().replace(/ \(.+\)/, '').replace(/\w+ /, '')
+    return <BlockSelect className={cn('condensed nowrap', className)} title={localTime}>{formatted}</BlockSelect>
+})
+
+UtcTimestamp.propTypes = {
+    date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
+    dateOnly: PropTypes.bool,
+    className: PropTypes.string
+}

package/dex/price-dynamic.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {formatPrice} from '@stellar-expert/formatter'
+import './price-dynamic.scss'
+
+export const PriceDynamic = React.memo(function PriceDynamic({change, current, prev, standalone, allowZero}) {
+    if (change === undefined) {
+        if (current === prev || !prev || !current) {
+            change = 0
+        } else {
+            change = 100 * (current - prev) / prev
+        }
+    }
+    if (Math.abs(change) > 10000)
+        return null
+    change = formatPrice(Math.abs(change), 2) + '%'
+    if (change === '0%' && !allowZero)
+        return null
+    let direction
+    if (parseInt(change) > 0) {
+        direction = 'positive'
+    }
+    if (parseInt(change) < 0) {
+        direction = 'negative'
+    }
+    const className = cn('price-change', getChangeDirection(change), {standalone})
+    return <span className={className} aria-label={` (${change})`}>{change}</span>
+})
+
+function getChangeDirection(change) {
+    change = parseInt(change, 10)
+    if (change > 0)
+        return 'positive'
+    if (change < 0)
+        return 'negative'
+}
+
+PriceDynamic.propTypes = {
+    change: PropTypes.number,
+    current: PropTypes.number,
+    prev: PropTypes.number,
+    standalone: PropTypes.bool,
+    allowZero: PropTypes.bool
+}

package/dex/price-dynamic.scss

@@ -0,0 +1,36 @@
+@use "../basic-styles/variables";
+
+.price-change {
+  vertical-align: super;
+  line-height: 1;
+  font-size: 0.8em;
+  margin-right: -0.2em;
+
+  &:before {
+    font-size: .8em;
+    vertical-align: bottom;
+    padding: 0 .1em;
+    line-height: 2.2;
+  }
+
+  &.positive {
+    color: var(--color-price-up);
+
+    &:before {
+      content: '\2191';
+    }
+  }
+
+  &.negative {
+    color: var(--color-price-down);
+
+    &:before {
+      content: '\2193';
+    }
+  }
+
+  &.standalone {
+    vertical-align: middle;
+    font-size: 0.9em;
+  }
+}

package/directory/directory-hooks.js

@@ -0,0 +1,89 @@
+import {useEffect, useState} from 'react'
+import {StrKey} from '@stellar/stellar-base'
+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'
+
+const cache = new InMemoryClientCache({})
+
+const loader = new ExplorerBatchInfoLoader(batch => {
+    return fetchExplorerApi('directory' + stringifyQuery({address: batch}))
+}, entry => {
+    cache.set(entry.address, entry)
+    return {key: entry.address, info: entry}
+})
+
+export async function getDirectoryEntry(address, options) {
+    const {forceRefresh = false, extended = false} = options || {}
+    //ignore invalid addresses
+    if (!address || !StrKey.isValidEd25519PublicKey(address)) return null
+    if (extended) {
+        return fetchExplorerApi(`directory/${address}` + stringifyQuery({
+            extended: true,
+            s: Math.random().toString(36).substr(2)
+        }))
+            .catch(err => {
+                console.error(err)
+                return null
+            })
+    }
+    //try to load from the shared cache
+    if (forceRefresh) {
+        const cachedEntry = cache.get(address)
+        if (cachedEntry && !cachedEntry.isExpired) return cachedEntry.data
+    }
+    //load from the server
+    return loader.loadEntry(address)
+}
+
+/**
+ *
+ * @param {String} address
+ * @param {{[forceRefresh]: Boolean}} [options]
+ * @return {String|null}
+ */
+export function useDirectory(address, options) {
+    const {forceRefresh = false} = options || {}
+    const [directoryInfo, setDirectoryInfo] = useState(null)
+    let unloaded = false
+    useEffect(function () {
+        if (!address || !(StrKey.isValidEd25519PublicKey(address) || StrKey.isValidContract(address)))
+            return
+        if (!forceRefresh) {
+            const cachedEntry = cache.get(address)
+            if (cachedEntry && !cachedEntry.isStale) {
+                if (!cachedEntry.isExpired)
+                    return setDirectoryInfo(cachedEntry.data) //everything is up to date - no need to re-fetch
+            }
+        }
+        //load from the server
+        loader.loadEntry(address)
+            .then(di => {
+                if (!unloaded) {
+                    setDirectoryInfo(di)
+                }
+            })
+        return () => {
+            unloaded = true
+        }
+    }, [address, forceRefresh])
+    return directoryInfo
+}
+
+export function useDirectoryTags() {
+    const [tags, setTags] = useState(() => {
+        const cachedEntry = cache.get('tags')
+        if (cachedEntry && !cachedEntry.isExpired) {
+            return cachedEntry.data
+        }
+        fetchExplorerApi('directory/tags')
+            .then(data => {
+                cache.set('tags', data, 10 * 60) //10 minutes
+                setTags(data)
+            })
+            .catch(err => console.error(err))
+        return []
+    })
+    return tags
+}