@stellar-expert/ui-framework 1.9.0

package/stellar/key-type.js

@@ -0,0 +1,92 @@
+import {StrKey} from '@stellar/stellar-base'
+
+/**
+ * @param {String} key
+ * @return {{address: String, type: ('muxed'|'ed25519'|'hash'|'tx'|'contract'), [muxedId]: BigInt}|null}
+ * @internal
+ */
+export function decodeKeyType(key) {
+    if (typeof key !== 'string')
+        return null
+    const prefix = key[0]
+    try {
+        switch (prefix) {
+            case 'G':
+                checkLength(key)
+                return {
+                    type: 'ed25519',
+                    address: key
+                }
+            case 'C':
+                checkLength(key)
+                return {
+                    type: 'contract',
+                    address: key
+                }
+            case 'M':
+                return {
+                    type: 'muxed',
+                    ...parseMuxedAccount(key)
+                }
+            case 'X':
+                checkLength(key)
+                return {
+                    type: 'hash',
+                    address: key
+                }
+            case 'T':
+                checkLength(key)
+                return {
+                    type: 'tx',
+                    address: key
+                }
+            case 'P':
+                const spayload = StrKey.decodeSignedPayload(key)
+                return {
+                    type: 'signedPayload',
+                    address: key,
+                    publicKey: StrKey.encodeEd25519PublicKey(spayload.slice(0, 32)),
+                    payload: spayload.slice(36, 36 + spayload.readUIntBE(32, 4)).toString('hex')
+                }
+            default:
+                console.error(new Error('Unknown key prefix: ' + typeof key))
+                return null
+        }
+    } catch (e) {
+        console.error(e)
+        return null
+    }
+}
+
+function checkLength(key, length = 56) {
+    if (key.length !== length)
+        throw new Error('Invalid key length: ' + key)
+}
+
+/**
+ * Parse multiplexed account address
+ * @param {String} muxedAddress - Multiplexed Stellar address
+ * @return {{address: String, muxedId: BigIint}}
+ */
+export function parseMuxedAccount(muxedAddress) {
+    const muxed = StrKey.decodeMed25519PublicKey(muxedAddress)
+    return {
+        address: StrKey.encodeEd25519PublicKey(muxed.slice(0, 32)),
+        muxedId: muxed.readBigInt64BE(32)
+    }
+}
+
+/**
+ * Encode address and identifier into a multiplexed address
+ * @param {String} address - StrKey-encode Stellar account address
+ * @param {BigInt} muxedId - Multiplexed int64 id
+ * @return {String}
+ */
+export function encodeMuxedAccount(address, muxedId) {
+    const raw = Buffer.allocUnsafe(40)
+    //write 32 bytes of ed25519 pubkey
+    StrKey.decodeEd25519PublicKey(address).copy(raw)
+    //write 8 id bytes
+    raw.writeBigInt64BE(muxedId, 32)
+    return StrKey.encodeMed25519PublicKey(raw)
+}

package/stellar/ledger-generic-id.js

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

package/stellar/signature-hint-utils.js

@@ -0,0 +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 {Singature} 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-notification-instance.js

@@ -0,0 +1,43 @@
+export default class ToastNotificationInstance {
+    constructor(props) {
+        Object.assign(this, props)
+        this.timer = null
+        this.started = new Date()
+        this.remaining = props.ttl || ToastNotificationInstance.ttl
+    }
+
+    id
+
+    type
+
+    message = ''
+
+    onDelete
+
+    deleted = false
+
+    started
+
+    remaining
+
+    delete() {
+        this.deleted = true
+        this.onDelete(this.id)
+    }
+
+    pauseTimer() {
+        clearTimeout(this.timer)
+        this.timer = null
+        this.remaining -= new Date() - this.started
+    }
+
+    resumeTimer(action) {
+        if (this.timer)
+            return
+
+        this.started = new Date()
+        this.timer = setTimeout(action, this.remaining)
+    }
+
+    static ttl = 10_000 // 10 seconds by default
+}

package/toast/toast-notification.js

@@ -0,0 +1,46 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import cn from 'classnames'
+
+const contextIcon = {
+    'info': 'icon-info',
+    'success': 'icon-ok',
+    'warning': 'icon-warning',
+    'error': 'icon-warning'
+}
+
+function ToastNotification({notification}) {
+    const {type = 'info'} = notification
+    const [isClosing, setIsClosing] = useState(false)
+    const close = useCallback(function () {
+        if (notification.deleted)
+            return
+        setIsClosing(closing => {
+            if (closing)
+                return closing
+            setTimeout(() => notification.delete(), 300)
+            return true
+        })
+    }, [notification])
+
+    const pauseTimer = useCallback(() => {
+        notification.pauseTimer()
+    }, [notification])
+
+    const resumeTimer = useCallback(() => {
+        notification.resumeTimer(close)
+    }, [notification, close])
+
+    useEffect(() => {
+        notification.timer = setTimeout(close, notification.remaining)
+    }, [notification, close])
+
+    const notificationClass = cn('toast-notification segment', type, {'slide-in': !isClosing, 'slide-out': isClosing})
+    return <div className={notificationClass} onMouseEnter={pauseTimer} onMouseLeave={resumeTimer}>
+        <i className={cn('toast-notification-icon', contextIcon[type])}/>
+        <div>{notification.message}</div>
+        <a href="#" className="toast-notification-icon icon-cancel" onClick={close}/>
+        <div className="lifetime" style={{animationDuration: notification.ttl + 'ms'}}/>
+    </div>
+}
+
+export default ToastNotification

package/toast/toast-notifications-block.js

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

@@ -0,0 +1,166 @@
+.toast-notifications-container {
+  $toast-space: 0.75*$space-standard;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 50vw;
+  max-width: 30em;
+  padding: 4px 4px 0 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column-reverse;
+
+  &:not(:first-child) {
+    margin-bottom: 0.375em;
+  }
+
+  .toast-notification {
+    position: relative;
+    display: flex;
+    align-items: start;
+    width: 100%;
+    padding: $toast-space;
+    padding-right: $toast-space*2;
+    transition: transform 0.3s ease-out;
+    opacity: 0.92;
+    line-height: 2rem;
+    margin-bottom: 4px;
+
+    @media (max-width: $responsive-mobile-browser-width) {
+      padding: 0.5*$space-standard;
+      padding-right: $space-standard;
+    }
+
+    &:hover {
+      opacity: 1;
+
+      .lifetime {
+        animation-play-state: paused;
+      }
+    }
+
+    &:before, &:after {
+      clip-path: polygon(0.6rem 0, 100% 0, 100% 100%, calc(100% - 0.6rem) 100%, 0 100%, 0 1.6rem);
+    }
+
+    &.slide-in {
+      animation: .3s slideIn ease-in-out;
+    }
+
+    &.slide-out {
+      transform: translateX(150%);
+      flex: 0;
+    }
+
+    > .toast-notification-icon {
+      font-size: 1.2em;
+      padding-right: $space-micro;
+      @media (max-width: $responsive-mobile-browser-width) {
+        font-size: 1em;
+        padding-right: $space-micro/2;
+      }
+    }
+
+    > div {
+      color: var(--color-text);
+      font-size: 0.9em;
+      @media (max-width: $responsive-mobile-browser-width) {
+        font-size: 0.85em;
+      }
+    }
+
+    .icon-cancel {
+      cursor: pointer;
+      position: absolute;
+      top: $toast-space;
+      right: 0;
+
+      @media (max-width: $responsive-mobile-browser-width) {
+        top: $space-micro;
+      }
+    }
+
+    .lifetime {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      max-width: 0;
+      height: 2px;
+      animation-name: timeToClose;
+      animation-duration: 10s;
+      animation-timing-function: linear;
+    }
+
+    &.info {
+      .toast-notification-icon {
+        color: var(--color-highlight);
+      }
+
+      .lifetime {
+        background-color: var(--color-highlight);
+      }
+    }
+
+    &.success {
+      &:before {
+        background: var(--color-success-bg);
+      }
+
+      .toast-notification-icon {
+        color: var(--color-success);
+      }
+
+      .lifetime {
+        background-color: var(--color-success);
+      }
+    }
+
+    &.warning {
+      &:before {
+        background: var(--color-warning-bg);
+      }
+
+      .toast-notification-icon {
+        color: var(--color-warning);
+      }
+
+      .lifetime {
+        background-color: var(--color-warning);
+      }
+    }
+
+    &.error {
+      &:before {
+        background: var(--color-alert-bg);
+      }
+
+      .toast-notification-icon {
+        color: var(--color-alert);
+      }
+
+      .lifetime {
+        background-color: var(--color-alert);
+      }
+    }
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes timeToClose {
+  from {
+    max-width: 100%;
+  }
+  to {
+    max-width: 0;
+  }
+}

package/tx/op-accounting-changes.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {Amount} from '../asset/amount'
+import {retrieveOpBalanceChanges} from './parser/op-balance-changes'
+
+/**
+ * Compact accounting effects (credited/debited amounts)
+ * @param {OperationDescriptor} op
+ * @constructor
+ */
+export function OpAccountingChanges({op}) {
+    const changes = retrieveOpBalanceChanges(op)
+    return <div className="accounting-effects condensed">
+        {changes.map((ch, i) => <div key={op.txHash + op.order + i}
+                                     className={ch.type === 'accountDebited' ? 'dimmed' : 'color-success'}>
+            {ch.type === 'accountDebited' ? '-' : '+'}
+            <Amount amount={ch.amount} asset={ch.asset} issuer={false} icon={false}/>
+        </div>)}
+    </div>
+}
+
+export function TxFeeAccountingChanges({amount}) {
+    return <div className="accounting-effects condensed">
+        <div className="dimmed">
+            -<Amount amount={amount} asset="XLM" issuer={false} icon={false}/>
+        </div>
+    </div>
+}