@stellar-expert/ui-framework 1.14.4 → 1.14.6

package/api/explorer-api-paginated-list-hooks.js

@@ -262,7 +262,7 @@ class PaginatedListViewModel {
     }
 
     /**
-     * Update naviagtion links retrieved from the response
+     * Update navigation links retrieved from the response
      * @param {String} self
      * @param {String} next
      * @param {String} prev
@@ -360,7 +360,7 @@ class PaginatedListViewModel {
  * @typedef {Object} ExplorerApiListResponse
  * @property {Object[]} data - Data retrieved from the server
  * @property {Boolean} loaded - Response result loaded flag
- * @property {Function} load - Load pgae function
+ * @property {Function} load - Load page function
  * @property {Boolean} canLoadPrevPage - Whether the prev page is available
  * @property {Boolean} canLoadNextPage - Whether the next page is available
  */

package/asset/asset-link.js

@@ -15,7 +15,7 @@ import './asset-link.scss'
  * @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 {Boolean} [icon] - Whether to show asset icon
  * @param {String} [className] - Optional CSS class name
  * @param {{}} [style] - Optional CSS style
  * @param {*} [children] - Optional inner link text

package/asset/asset-selector.js

@@ -21,7 +21,7 @@ export function AssetSelector({value, predefinedAssets, onChange, restricted, ti
 
     const focusSearch = useCallback(() => {
         setTimeout(() => searchRef.current?.focus(), 200)
-    })
+    }, [])
 
     if (predefinedAssets) {
         for (const asset of predefinedAssets) {

package/controls/dropdown.js

@@ -28,7 +28,7 @@ export const Dropdown = React.memo(function Dropdown({
     const headerRef = useRef()
     const listRef = useRef()
     const [listOpen, updateListOpen] = useState(false)
-    const [alignRigth, setAlignRight] = useState(false)
+    const [alignRight, setAlignRight] = useState(false)
     //collapse dropdown handler
     const collapseDropdown = useCallback(function () {
         updateListOpen(open => {
@@ -39,7 +39,7 @@ export const Dropdown = React.memo(function Dropdown({
         })
     }, [onClose])
 
-    //collapse dropdwon list on click
+    //collapse dropdown list on click
     const [selectedValue, updateSelectedValue] = useDependantState(() => {
         if (listOpen) {
             setTimeout(() => {
@@ -51,7 +51,7 @@ export const Dropdown = React.memo(function Dropdown({
         document.removeEventListener('click', collapseDropdown)
     })
 
-    //close/open dropdown on header cick
+    //close/open dropdown on header click
     const toggleList = useCallback(function toggleList(e) {
         e && e.nativeEvent.stopImmediatePropagation()
         updateListOpen(prevState => {
@@ -71,7 +71,7 @@ export const Dropdown = React.memo(function Dropdown({
         updateSelectedValue(option)
     }, [collapseDropdown, onChange])
 
-    //handle user scroll action for infinit scroll support
+    //handle user scroll action for infinity scroll support
     const scrollList = useMemo(() => throttle(200, e => {
         if (!onScroll)
             return
@@ -84,12 +84,19 @@ export const Dropdown = React.memo(function Dropdown({
         onScroll(pos)
     }), [onScroll])
 
-    //locate currently selectd option
+    //locate currently selected option
     const {option: selectedItem, isDefault} = getSelectedOption([value, selectedValue], options)
 
-    //check dropdown container alignement
+    //check dropdown container alignment
     if (listOpen) {
-        setTimeout(() => setAlignRight(isAlignedRight(listRef.current)), 200)
+        setTimeout(() => {
+            if (!alignRight) {
+                const shouldAlignRight = isAlignedRight(listRef.current)
+                if (alignRight !== shouldAlignRight) {
+                    setAlignRight(shouldAlignRight)
+                }
+            }
+        }, 200)
     }
     //show a dropdown after the initial render
     useEffect(() => {
@@ -106,7 +113,7 @@ export const Dropdown = React.memo(function Dropdown({
         </a>
         {!!listOpen && createPortal(<div className={className}>
             <div className={cn('dd-backdrop', {solo})}/>
-            <div className={cn('dd-list', {solo, visible: listOpen && !disabled, 'align-right': alignRigth})}
+            <div className={cn('dd-list', {solo, visible: listOpen && !disabled, 'align-right': alignRight})}
                  style={getListPosition(headerRef.current, solo)} ref={listRef}>
                 {!!header && <>
                     <div className="dd-list-header" onClick={preventClosing}>{header}</div>

package/controls/dropdown.scss

@@ -77,7 +77,8 @@
   margin-left: -0.8em;
 
   &.align-right {
-    right: -0.2em
+    right: -0.2em;
+    left: auto !important;
   }
 
   > ul {

package/controls/slider.js

@@ -2,7 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react'
 import {throttle} from 'throttle-debounce'
 import './slider.scss'
 
-export function Slider({value, categroies, onChange, min = 0, max = 100, step = 1, ...otherProps}) {
+export function Slider({value, categories, onChange, min = 0, max = 100, step = 1, ...otherProps}) {
     const [inputValue, setInputValue] = useState(value || min)
     const change = useMemo(() => throttle(300, onChange), [onChange])
     const onSlide = useCallback(function (e) {
@@ -12,8 +12,8 @@ export function Slider({value, categroies, onChange, min = 0, max = 100, step =
     }, [change])
 
     return <div className="slider dimmed text-small" {...otherProps}>
-        {categroies && <datalist className="categories dimmed condensed">
-            {categroies.map((category, index) => <option key={index + category} value={category} label={category}/>)}
+        {categories && <datalist className="categories dimmed condensed">
+            {categories.map((category, index) => <option key={index + category} value={category} label={category}/>)}
         </datalist>}
         <input type="range" min={min} max={max} step={step} value={inputValue} onChange={onSlide}/>
     </div>

package/interaction/qr-code.js

@@ -7,7 +7,7 @@ import QR from 'qrcode.react'
  * @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)
+ * @param {Number} [embeddedSize] - Embedded 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}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.14.4",
+  "version": "1.14.6",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",

package/stellar/signature-hint-utils.js

@@ -45,7 +45,7 @@ export function findKeyBySignatureHint(hint, allKeys) {
 /**
  * Find tx signature for a given signer key
  * @param {String} key
- * @param {Singature} allSignatures
+ * @param {Signature} allSignatures
  * @returns {Signature}
  */
 export function findSignatureByKey(key, allSignatures = []) {

package/tx/parser/tx-details-parser.js

@@ -35,7 +35,7 @@ import TxMatcher from './tx-matcher'
  * @param {String} tx - Base64-encoded tx envelope xdr
  * @param {String} [result] - Base64-encoded tx envelope result
  * @param {String} [meta] - Base64-encoded tx envelope meta
- * @param {String} [id] - Unique trasnaction id
+ * @param {String} [id] - Unique transaction id
  * @param {TxFiltersContext} [context] - Filters applied to transactions search
  * @param {String} [createdAt] - Ledger execution timestamp
  * @param {Boolean} [skipUnrelated] - Ledger execution timestamp

package/tx/parser/tx-matcher.js

@@ -202,7 +202,7 @@ export default class TxMatcher {
         }
         //add op source account
         matchingProps.source = new Set([op.source])
-        //porcess assets
+        //process assets
         if (filters.asset || filters.src_asset || filters.dest_asset)
             switch (op.type) {
                 case 'createAccount':

package/tx/parser/type-filter-matcher.js

@@ -1,4 +1,4 @@
-const operatinTypeMap = {
+const operationTypeMap = {
     createAccount: 0,
     payment: 1,
     pathPaymentStrictReceive: 2,
@@ -53,7 +53,7 @@ export class TypeFilterMatcher {
      * @return {Boolean}
      */
     match(operationType) {
-        return !this.types || this.types.has(operatinTypeMap[operationType])
+        return !this.types || this.types.has(operationTypeMap[operationType])
     }
 
     /**
@@ -74,51 +74,51 @@ export class TypeFilterMatcher {
         switch (filter) {
             case 'payments':
                 return [
-                    operatinTypeMap.createAccount,
-                    operatinTypeMap.accountMerge,
-                    operatinTypeMap.payment,
-                    operatinTypeMap.pathPaymentStrictReceive,
-                    operatinTypeMap.pathPaymentStrictSend,
-                    operatinTypeMap.createClaimableBalance,
-                    operatinTypeMap.claimClaimableBalance,
-                    operatinTypeMap.clawback,
-                    operatinTypeMap.clawbackClaimableBalance,
-                    operatinTypeMap.inflation
+                    operationTypeMap.createAccount,
+                    operationTypeMap.accountMerge,
+                    operationTypeMap.payment,
+                    operationTypeMap.pathPaymentStrictReceive,
+                    operationTypeMap.pathPaymentStrictSend,
+                    operationTypeMap.createClaimableBalance,
+                    operationTypeMap.claimClaimableBalance,
+                    operationTypeMap.clawback,
+                    operationTypeMap.clawbackClaimableBalance,
+                    operationTypeMap.inflation
                 ]
             case 'trustlines':
                 return [
-                    operatinTypeMap.changeTrust,
-                    operatinTypeMap.allowTrust,
-                    operatinTypeMap.setTrustLineFlags
+                    operationTypeMap.changeTrust,
+                    operationTypeMap.allowTrust,
+                    operationTypeMap.setTrustLineFlags
                 ]
             case 'dex':
                 return [
-                    operatinTypeMap.manageSellOffer,
-                    operatinTypeMap.manageBuyOffer,
-                    operatinTypeMap.createPassiveSellOffer,
-                    operatinTypeMap.liquidityPoolDeposit,
-                    operatinTypeMap.liquidityPoolWithdraw
+                    operationTypeMap.manageSellOffer,
+                    operationTypeMap.manageBuyOffer,
+                    operationTypeMap.createPassiveSellOffer,
+                    operationTypeMap.liquidityPoolDeposit,
+                    operationTypeMap.liquidityPoolWithdraw
                 ]
             case 'settings':
                 return [
-                    operatinTypeMap.createAccount,
-                    operatinTypeMap.setOptions,
-                    operatinTypeMap.changeTrust,
-                    operatinTypeMap.allowTrust,
-                    operatinTypeMap.accountMerge,
-                    operatinTypeMap.inflation,
-                    operatinTypeMap.manageData,
-                    operatinTypeMap.bumpSequence,
-                    operatinTypeMap.beginSponsoringFutureReserves,
-                    operatinTypeMap.endSponsoringFutureReserves,
-                    operatinTypeMap.revokeSponsorship,
-                    operatinTypeMap.setTrustLineFlags
+                    operationTypeMap.createAccount,
+                    operationTypeMap.setOptions,
+                    operationTypeMap.changeTrust,
+                    operationTypeMap.allowTrust,
+                    operationTypeMap.accountMerge,
+                    operationTypeMap.inflation,
+                    operationTypeMap.manageData,
+                    operationTypeMap.bumpSequence,
+                    operationTypeMap.beginSponsoringFutureReserves,
+                    operationTypeMap.endSponsoringFutureReserves,
+                    operationTypeMap.revokeSponsorship,
+                    operationTypeMap.setTrustLineFlags
                 ]
             case 'contracts':
                 return [
-                    operatinTypeMap.invokeHostFunction,
-                    operatinTypeMap.bumpFootprintExpiration,
-                    operatinTypeMap.restoreFootprint
+                    operationTypeMap.invokeHostFunction,
+                    operationTypeMap.bumpFootprintExpiration,
+                    operationTypeMap.restoreFootprint
                 ]
             default:
                 return [parseInt(filter, 10)]