@stellar-expert/ui-framework 1.16.7 → 1.17.0

package/controls/tooltip.scss

@@ -1,117 +1,117 @@
-$tooltip-notch-shadow-color: var(--color-border-shadow);
-
-.tooltip-wrapper {
-  width: 40rem;
-  max-width: Min(40rem, 60vw);
-  margin: 0;
-  padding: .8rem;
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s;
-  z-index: 10;
-  background: transparent;
-  border: none;
-
-  &:popover-open {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-.tooltip {
-  position: relative;
-  font-size: 0.9*$font-size-base;
-  font-style: normal;
-  line-height: 1.3;
-  background: var(--color-bg);
-  border-color: var(--color-contrast-border);
-  border-radius: $border-radius-input;
-  box-shadow: 0 1px 6px 2px var(--color-backdrop);
-  padding: 1rem 1.4rem;
-  letter-spacing: normal;
-  word-break: normal;
-  visibility: hidden;
-
-  &:before {
-    content: "";
-    background: var(--color-bg);
-    height: .8rem;
-    width: .8rem;
-    position: absolute;
-    z-index: 9;
-    transform: rotate(45deg);
-  }
-
-  &.top:before {
-    left: 50%;
-    bottom: -.2em;
-    box-shadow: 1px 1px 0 $tooltip-notch-shadow-color;
-    margin-left: -0.26rem;
-  }
-
-  &.bottom:before {
-    left: 50%;
-    top: -.2em;
-    box-shadow: -1px -1px 0 $tooltip-notch-shadow-color;
-    margin-left: -0.26rem;
-  }
-
-  &.left:before {
-    right: -.2em;
-    top: 50%;
-    margin-top: -0.26em;
-    box-shadow: 1px -1px 0 $tooltip-notch-shadow-color;
-  }
-
-  &.right:before {
-    left: -.2em;
-    top: 50%;
-    margin-top: -0.26em;
-    box-shadow: -1px 1px 0 $tooltip-notch-shadow-color;
-  }
-
-  .tooltip-content {
-    color: var(--color-text);
-    z-index: 5;
-    position: relative;
-  }
-
-  &.visible {
-    visibility: visible;
-  }
-}
-
-.trigger {
-  position: absolute;
-  font-size: 1.2rem;
-  margin-top: -.3rem;
-  margin-left: .1rem;
-  margin-right: .1rem;
-  color: var(--color-primary);
-
-  + .trigger {
-    margin-left: 1em;
-  }
-
-  &:before {
-    opacity: 0.4;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    opacity: 0.01;
-    display: block;
-    width: 2em;
-    height: 2em;
-    left: -0.4em;
-    top: -0.2em;
-  }
-
-  &:hover {
-    &:before {
-      opacity: 1;
-    }
-  }
+$tooltip-notch-shadow-color: var(--color-border-shadow);
+
+.tooltip-wrapper {
+  width: 40rem;
+  max-width: Min(40rem, 60vw);
+  margin: 0;
+  padding: .8rem;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s;
+  z-index: 10;
+  background: transparent;
+  border: none;
+
+  &:popover-open {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.tooltip {
+  position: relative;
+  font-size: 0.9*$font-size-base;
+  font-style: normal;
+  line-height: 1.3;
+  background: var(--color-bg);
+  border-color: var(--color-contrast-border);
+  border-radius: $border-radius-input;
+  box-shadow: 0 1px 6px 2px var(--color-backdrop);
+  padding: 1rem 1.4rem;
+  letter-spacing: normal;
+  word-break: normal;
+  visibility: hidden;
+
+  &:before {
+    content: "";
+    background: var(--color-bg);
+    height: .8rem;
+    width: .8rem;
+    position: absolute;
+    z-index: 9;
+    transform: rotate(45deg);
+  }
+
+  &.top:before {
+    left: 50%;
+    bottom: -.2em;
+    box-shadow: 1px 1px 0 $tooltip-notch-shadow-color;
+    margin-left: -0.26rem;
+  }
+
+  &.bottom:before {
+    left: 50%;
+    top: -.2em;
+    box-shadow: -1px -1px 0 $tooltip-notch-shadow-color;
+    margin-left: -0.26rem;
+  }
+
+  &.left:before {
+    right: -.2em;
+    top: 50%;
+    margin-top: -0.26em;
+    box-shadow: 1px -1px 0 $tooltip-notch-shadow-color;
+  }
+
+  &.right:before {
+    left: -.2em;
+    top: 50%;
+    margin-top: -0.26em;
+    box-shadow: -1px 1px 0 $tooltip-notch-shadow-color;
+  }
+
+  .tooltip-content {
+    color: var(--color-text);
+    z-index: 5;
+    position: relative;
+  }
+
+  &.visible {
+    visibility: visible;
+  }
+}
+
+.trigger {
+  position: absolute;
+  font-size: 1.2rem;
+  margin-top: -.3rem;
+  margin-left: .1rem;
+  margin-right: .1rem;
+  color: var(--color-primary);
+
+  + .trigger {
+    margin-left: 1em;
+  }
+
+  &:before {
+    opacity: 0.4;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    opacity: 0.01;
+    display: block;
+    width: 2em;
+    height: 2em;
+    left: -0.4em;
+    top: -0.2em;
+  }
+
+  &:hover {
+    &:before {
+      opacity: 1;
+    }
+  }
 }

package/controls/update-highlighter.js

@@ -1,28 +1,33 @@
-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
+import React, {useRef} from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {useDependantState} from '../state/state-hooks'
+import './update-highlighter.scss'
+
+/**
+ * Briefly highlights its content with an animation when children change
+ * @param {Object} props
+ * @param {*} props.children - Content to monitor and highlight on update
+ */
+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

@@ -1,8 +1,8 @@
-.highlighter {
-  animation: highlighter 0.6s ease-in;
-}
-
-@keyframes highlighter {
-  from {background-color: transparentize($color-primary, 0.5);}
-  to {background-color: transparent;}
+.highlighter {
+  animation: highlighter 0.6s ease-in;
+}
+
+@keyframes highlighter {
+  from {background-color: rgba($color-primary, 0.5);}
+  to {background-color: transparent;}
 }

package/date/date-selector.js

@@ -1,55 +1,57 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {debounce} from 'throttle-debounce'
-import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
-
-/**
- * @param {String} value - Current input value
- * @param {DateSelector~OnChange} onChange - Onchange event handler
- * @param {String} [min] - Minimum allowed date
- * @param {String} [max] - Maximum allowed date
- * @param {*} [ref]
- */
-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(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
-            }
-        }
-    }), [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}/>
-}
-
-/**
- * @param {Date|Number} date
- * @return {String}
- */
-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'))
-
-/**
- * @callback DateSelector~OnChange
- * @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
+import React, {useCallback, useEffect, useState} from 'react'
+import {debounce} from 'throttle-debounce'
+import {normalizeDate, toUnixTimestamp} from '@stellar-expert/formatter'
+
+/**
+ * Date-time picker input
+ * @param {string} value - Current input value
+ * @param {DateSelector~OnChange} onChange - Onchange event handler
+ * @param {string} [min] - Minimum allowed date
+ * @param {string} [max] - Maximum allowed date
+ * @param {*} [ref]
+ */
+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(newDate ? toUnixTimestamp(normalizeDate(newDate)) : null)
+            }
+        }
+    }), [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}/>
+}
+
+/**
+ * Trim seconds and milliseconds for basic ISO date format representation
+ * @param {Date|number} date
+ * @return {string}
+ */
+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'))
+
+/**
+ * @callback DateSelector~OnChange
+ * @param {number|null} value - Selected value represented as a Unix timestamp or null for invalid date value
  */

package/date/elapsed-time.js

@@ -1,22 +1,29 @@
-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>
+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'
+}
+
+/**
+ * Displays relative elapsed time since a given timestamp (e.g., "3m ago")
+ * @param {Object} props
+ * @param {Date|string|number} props.ts - Timestamp to measure elapsed time from
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {string} [props.suffix] - Text appended after the time (e.g., " ago")
+ */
+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/dex/price-dynamic.js

@@ -1,45 +1,54 @@
-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
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {formatPrice} from '@stellar-expert/formatter'
+import './price-dynamic.scss'
+
+/**
+ * Displays a price change percentage with positive/negative styling
+ * @param {Object} props
+ * @param {number} [props.change] - Pre-calculated change percentage; auto-calculated from current/prev if omitted
+ * @param {number} [props.current] - Current price value (used to calculate change)
+ * @param {number} [props.prev] - Previous price value (used to calculate change)
+ * @param {boolean} [props.standalone] - Apply standalone styling
+ * @param {boolean} [props.allowZero] - Show "0%" instead of returning null for zero change
+ */
+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

@@ -1,34 +1,34 @@
-.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;
-  }
+.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;
+  }
 }