@stellar-expert/ui-framework 1.16.7 → 1.17.0

package/stellar/ledger-generic-id.js

@@ -1,40 +1,40 @@
-/**
- * @typedef {Object} ParsedStellarId
- * @property {('unknown'|'ledger'|'transaction'|'operation')} type - Parsed id type
- * @property {String} [id] - Parsed id
- * @property {Number} [ledger] - Ledger sequence
- * @property {String} [tx] - Transaction id
- * @property {Number} [operationOrder] - Operation order within a transaction
- */
-
-/**
- * Parse stellar generic id
- * @param {String} id
- * @returns {ParsedStellarId}
- */
-export function parseStellarGenericId(id) {
-    if (!/^\d{1,19}$/.test(id)) return {type: 'unknown'}
-    const parsed = BigInt(id)
-    const res = {
-        id,
-        type: 'unknown'
-    }
-    if (parsed < 4294967296n) {
-        res.type = 'ledger'
-        res.ledger = Number(parsed)
-        return res
-    }
-    const ledger = parsed / 4294967296n
-    const opOrder = parsed % 4096n
-    res.ledger = Number(ledger)
-    if (opOrder > 0n) {
-        res.type = 'operation'
-        res.tx = (parsed - opOrder).toString()
-        res.operationOrder = Number(opOrder)
-    } else {
-        res.type = 'transaction'
-        res.tx = parsed.toString()
-    }
-
-    return res
+/**
+ * @typedef {Object} ParsedStellarId
+ * @property {('unknown'|'ledger'|'transaction'|'operation')} type - Parsed id type
+ * @property {string} [id] - Parsed id
+ * @property {number} [ledger] - Ledger sequence
+ * @property {string} [tx] - Transaction id
+ * @property {number} [operationOrder] - Operation order within a transaction
+ */
+
+/**
+ * Parse stellar generic id
+ * @param {string} id
+ * @returns {ParsedStellarId}
+ */
+export function parseStellarGenericId(id) {
+    if (!/^\d{1,19}$/.test(id)) return {type: 'unknown'}
+    const parsed = BigInt(id)
+    const res = {
+        id,
+        type: 'unknown'
+    }
+    if (parsed < 4294967296n) {
+        res.type = 'ledger'
+        res.ledger = Number(parsed)
+        return res
+    }
+    const ledger = parsed / 4294967296n
+    const opOrder = parsed % 4096n
+    res.ledger = Number(ledger)
+    if (opOrder > 0n) {
+        res.type = 'operation'
+        res.tx = (parsed - opOrder).toString()
+        res.operationOrder = Number(opOrder)
+    } else {
+        res.type = 'transaction'
+        res.tx = parsed.toString()
+    }
+
+    return res
 }

package/stellar/signature-hint-utils.js

@@ -1,65 +1,65 @@
-import {Keypair} from '@stellar/stellar-base'
-
-/**
- * Convert the signature hint to the StrKey mask
- * @param {Buffer} hint - Hint to convert
- * @return {String}
- */
-export function signatureHintToMask(hint) {
-    const partialPublicKey = Buffer.concat([new Buffer(28).fill(0), hint]),
-        hintKeypair = new Keypair({type: 'ed25519', publicKey: partialPublicKey}),
-        pk = hintKeypair.publicKey()
-    return pk.substring(0, 1) + '_'.repeat(46) + pk.substring(47, 52) + '_'.repeat(4)
-}
-
-/**
- * Format the signature hint to the friendly form for UI
- * @param {Buffer} hint - Hint to convert
- * @return {string}
- */
-export function formatSignatureHint(hint) {
-    const mask = signatureHintToMask(hint)
-    return mask.substring(0, 2) + '…' + mask.substring(46)
-}
-
-/**
- * Check if the hint matches the specific key
- * @param {Buffer} hint - Hint to check
- * @param {String} key - Key to compare
- * @return {Boolean}
- */
-export function singatureHintMatchesKey(hint, key) {
-    return signatureHintToMask(hint).substring(47, 52) === key.substring(47, 52)
-}
-
-/**
- * Find a key by the signature hint
- * @param {Buffer} hint - Hint to look for
- * @param {Array<String>} allKeys - Array of potentially matching keys
- * @return {String|null}
- */
-export function findKeyBySignatureHint(hint, allKeys) {
-    return allKeys.find(key => singatureHintMatchesKey(hint, key))
-}
-
-/**
- * Find tx signature for a given signer key
- * @param {String} key
- * @param {Signature} allSignatures
- * @returns {Signature}
- */
-export function findSignatureByKey(key, allSignatures = []) {
-    return allSignatures.find(sig => singatureHintMatchesKey(sig.hint(), key))
-}
-
-/**
- * Check if the hint matches any of the provided keys
- * @param {Buffer} signature - Tx signature
- * @param {Array<String>} publicKeys - Array of available public keys
- * @returns {Array<String>}
- */
-export function findKeysBySignatureHint(signature, keys) {
-    const mask = signatureHintToMask(signature.hint())
-    return keys.filter(address => mask[0] === address[0] &&
-        mask.substr(47, 5) === address.substr(47, 5))
-}
+import {Keypair} from '@stellar/stellar-base'
+
+/**
+ * Convert the signature hint to the StrKey mask
+ * @param {Buffer} hint - Hint to convert
+ * @return {string}
+ */
+export function signatureHintToMask(hint) {
+    const partialPublicKey = Buffer.concat([new Buffer(28).fill(0), hint]),
+        hintKeypair = new Keypair({type: 'ed25519', publicKey: partialPublicKey}),
+        pk = hintKeypair.publicKey()
+    return pk.substring(0, 1) + '_'.repeat(46) + pk.substring(47, 52) + '_'.repeat(4)
+}
+
+/**
+ * Format the signature hint to the friendly form for UI
+ * @param {Buffer} hint - Hint to convert
+ * @return {string}
+ */
+export function formatSignatureHint(hint) {
+    const mask = signatureHintToMask(hint)
+    return mask.substring(0, 2) + '…' + mask.substring(46)
+}
+
+/**
+ * Check if the hint matches the specific key
+ * @param {Buffer} hint - Hint to check
+ * @param {string} key - Key to compare
+ * @return {boolean}
+ */
+export function singatureHintMatchesKey(hint, key) {
+    return signatureHintToMask(hint).substring(47, 52) === key.substring(47, 52)
+}
+
+/**
+ * Find a key by the signature hint
+ * @param {Buffer} hint - Hint to look for
+ * @param {Array<string>} allKeys - Array of potentially matching keys
+ * @return {string|null}
+ */
+export function findKeyBySignatureHint(hint, allKeys) {
+    return allKeys.find(key => singatureHintMatchesKey(hint, key))
+}
+
+/**
+ * Find tx signature for a given signer key
+ * @param {string} key
+ * @param {Signature} allSignatures
+ * @returns {Signature}
+ */
+export function findSignatureByKey(key, allSignatures = []) {
+    return allSignatures.find(sig => singatureHintMatchesKey(sig.hint(), key))
+}
+
+/**
+ * Check if the hint matches any of the provided keys
+ * @param {Buffer} signature - Tx signature
+ * @param {Array<string>} publicKeys - Array of available public keys
+ * @returns {Array<string>}
+ */
+export function findKeysBySignatureHint(signature, keys) {
+    const mask = signatureHintToMask(signature.hint())
+    return keys.filter(address => mask[0] === address[0] &&
+        mask.substr(47, 5) === address.substr(47, 5))
+}

package/toast/toast-notifications-block.js

@@ -1,60 +1,60 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {render} from 'react-dom'
-import ToastNotificationInstance from './toast-notification-instance'
-import Notification from './toast-notification'
-import './toast-notifications.scss'
-
-let notificationsCounter = 0
-
-/**
- * Initialize toast notifications, add toast notifications container to the DOM, and expose notify() global function
- * @return {HTMLDivElement}
- */
-export function createToastNotificationsContainer() {
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    render(<ToastNotificationsBlock/>, container)
-    return container
-}
-
-function ToastNotificationsBlock() {
-    const [notifications, setNotifications] = useState([])
-
-    const deleteNotification = useCallback(function (id) {
-        setNotifications(prev => {
-            const pos = prev.findIndex(v => v.id === id)
-            if (pos < 0)
-                return prev
-            const res = [...prev]
-            res.splice(pos, 1)
-            return res
-        })
-    }, [])
-
-    useEffect(() => {
-        //declare globally available notify() function
-        /**
-         * Show toast notification popup
-         * @param {'info'|'success'|'warning'|'error'} type - Notification type
-         * @param {String} message - Message to show
-         */
-        window.notify = function ({type, message}) {
-            const newNotification = new ToastNotificationInstance({
-                type,
-                message,
-                id: ++notificationsCounter,
-                onDelete: deleteNotification
-            })
-            setNotifications(prevNotifications => [newNotification, ...prevNotifications])
-        }
-        //set empty callback on unload
-        return () => {
-            window.notify = function () {
-            }
-        }
-    }, [])
-
-    return <div className="toast-notifications-container">
-        {notifications.map(props => <Notification key={props.id} notification={props}/>)}
-    </div>
+import React, {useCallback, useEffect, useState} from 'react'
+import {render} from 'react-dom'
+import ToastNotificationInstance from './toast-notification-instance'
+import Notification from './toast-notification'
+import './toast-notifications.scss'
+
+let notificationsCounter = 0
+
+/**
+ * Initialize toast notifications, add toast notifications container to the DOM, and expose notify() global function
+ * @return {HTMLDivElement}
+ */
+export function createToastNotificationsContainer() {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    render(<ToastNotificationsBlock/>, container)
+    return container
+}
+
+function ToastNotificationsBlock() {
+    const [notifications, setNotifications] = useState([])
+
+    const deleteNotification = useCallback(function (id) {
+        setNotifications(prev => {
+            const pos = prev.findIndex(v => v.id === id)
+            if (pos < 0)
+                return prev
+            const res = [...prev]
+            res.splice(pos, 1)
+            return res
+        })
+    }, [])
+
+    useEffect(() => {
+        //declare globally available notify() function
+        /**
+         * Show toast notification popup
+         * @param {'info'|'success'|'warning'|'error'} type - Notification type
+         * @param {string} message - Message to show
+         */
+        window.notify = function ({type, message}) {
+            const newNotification = new ToastNotificationInstance({
+                type,
+                message,
+                id: ++notificationsCounter,
+                onDelete: deleteNotification
+            })
+            setNotifications(prevNotifications => [newNotification, ...prevNotifications])
+        }
+        //set empty callback on unload
+        return () => {
+            window.notify = function () {
+            }
+        }
+    }, [])
+
+    return <div className="toast-notifications-container">
+        {notifications.map(props => <Notification key={props.id} notification={props}/>)}
+    </div>
 }

package/toast/toast-notifications.scss

@@ -58,7 +58,7 @@
       padding-right: $space-micro;
       @media (max-width: $responsive-mobile-browser-width) {
         font-size: 1em;
-        padding-right: $space-micro/2;
+        padding-right: calc($space-micro/2);
       }
     }