@stellar-expert/ui-framework 1.14.14 → 1.14.16

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

@@ -1,7 +1,7 @@
 import {useRef} from 'react'
 import isEqual from 'react-fast-compare'
 import {parseQuery, stringifyQuery, navigation} from '@stellar-expert/navigation'
-import {getCurrentStellarNetwork, useStellarNetwork} from '../state/stellar-network-hooks'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
 import {useDependantState} from '../state/state-hooks'
 import {fetchExplorerApi} from './explorer-api-call'
 import apiCache from './api-cache'

package/api/ledger-stream.js

@@ -0,0 +1,101 @@
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+
+class LedgerStream {
+    constructor() {
+        this.listeners = new Set()
+    }
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    listening = false
+    /**
+     * @type {Set<function>}
+     * @private
+     */
+    listeners
+
+    /**
+     * @param {function} listener
+     */
+    on(listener) {
+        this.listeners.add(listener)
+        if (!this.listening) {
+            this.listening = true
+            setTimeout(() => this.waitForLedger(), 100)
+        }
+    }
+
+    /**
+     * @param {function} listener
+     */
+    off(listener) {
+        this.listeners.delete(listener)
+        if (!this.listeners.size) {
+            this.listening = false
+        }
+    }
+
+    /**
+     * @param {number} ledger
+     * @private
+     */
+    notify(ledger) {
+        for (const listener of this.listeners) {
+            listener(ledger)
+        }
+    }
+
+    /**
+     * @return {Promise}
+     * @private
+     */
+    async waitForLedger() {
+        const url = `${explorerApiOrigin}/explorer/${getCurrentStellarNetwork()}/ledger/stream`
+        try {
+            const resp = await fetch(url, {keepalive: true, cache: 'no-cache'})
+            if (!resp.ok) {
+                let errorExt
+                try {
+                    errorExt = await resp.json()
+                } catch (parsingError) {
+                    errorExt = {}
+                }
+                const err = new Error(errorExt?.error || resp.statusText || 'Failed to fetch data from the server')
+                err.status = resp.status
+                err.ext = errorExt
+                throw err
+            }
+            const {ledger} = await resp.json()
+            this.notify(ledger)
+            if (this.listening) {
+                setTimeout(() => this.waitForLedger(), 1000)
+            }
+        } catch (e) {
+            console.error(e)
+            if (e instanceof Error) {
+                e = {
+                    error: e.message,
+                    status: e.status || 500,
+                    ext: e.ext
+                }
+            }
+            if (e.ext && e.ext.status) {
+                e.status = e.ext.status
+            }
+            return e
+        }
+    }
+
+    async getLast() {
+        return fetchExplorerApi('ledger/last')
+    }
+
+    async getLastSequence() {
+        return (await this.getLast()).sequence
+    }
+}
+
+export const ledgerStream = new LedgerStream()

package/index.js

@@ -19,6 +19,7 @@ export * from './api/explorer-api-hooks'
 export * from './api/explorer-api-paginated-list-hooks'
 export * from './api/explorer-tx-api'
 export * from './api/explorer-batch-info-loader'
+export * from './api/ledger-stream'
 //Horizon API binding and utils
 export * from './stellar/ledger-generic-id'
 export * from './horizon/horizon-client-helpers'
@@ -59,6 +60,7 @@ export * from './date/date-selector'
 //ledger-entries-related components
 export * from './ledger/ledger-entry-link'
 export * from './ledger/ledger-entry-href-formatter'
+export * from './ledger/ledger-info-parser'
 //account-related components
 export * from './account/identicon'
 export * from './account/account-address'

package/ledger/ledger-info-parser.js

@@ -0,0 +1,17 @@
+import {xdr} from '@stellar/stellar-base'
+
+export function retrieveLedgerInfo(data) {
+    const parsed = xdr.LedgerHeader.fromXDR(data.xdr, 'base64')
+    return {
+        sequence: data.sequence,
+        ts: data.ts,
+        protocol: data.protocol,
+        operations: data.operations || 0,
+        txSuccess: data.txSuccess,
+        txFailed: data.txFailed,
+        xlm: parsed.totalCoins().toBigInt(),
+        feePool: parsed.feePool().toBigInt(),
+        baseFee: parsed.baseFee(),
+        baseReserve: parsed.baseReserve()
+    }
+}

package/meta/page-meta-tags.js

@@ -1,23 +1,32 @@
 import {useEffect} from 'react'
 import isEqual from 'react-fast-compare'
 
-const {origin} = window.location
-const domain = origin.replace(/https?:\/\//, '')
-
 const metaProps = {
     serviceTitle: '',
     description: '',
-    facebookImage: '',
-    twitterImage: '',
-    twitterUsername: ''
+    image: '',
+    imageEndpoint: '',
+    origin: '',
+    domain: ''
 }
 
+setOrigin(window.location.origin)
+
 /**
  * Initialize default meta properties for the application
- * @param {{serviceTitle: String, description: String, facebookImage: String, twitterImage: String, twitterUsername: String}} appMetaProps
+ * @param {{serviceTitle: String, description: String, origin: String, [image]: String, [imageEndpoint]: String}} appMetaProps
  */
 export function initMeta(appMetaProps) {
-    Object.assign(metaProps, appMetaProps)
+    const {origin, ...props} = appMetaProps
+    Object.assign(metaProps, props)
+    if (origin) {
+        setOrigin(origin)
+    }
+}
+
+function setOrigin(origin) {
+    metaProps.origin = origin
+    metaProps.domain = origin.replace(/https?:\/\//, '')
 }
 
 function formatPageTitle(title) {
@@ -47,48 +56,35 @@ function generateDescriptionMeta({description}) {
     }
 }
 
-function generateTwitterMeta({description, title, twitterImage}) {
+function generateOpenGraphMeta({description, title, image}, canonicalUrl) {
+    //imageEndpoint
     return {
-        locator: 'name',
+        locator: 'property',
         tags: [
-            {name: 'twitter:card', content: 'summary_large_image'},
-            {name: 'twitter:site', content: metaProps.twitterUsername},
-            {name: 'twitter:title', content: formatPageTitle(title)},
-            {name: 'twitter:description', content: description || metaProps.description},
-            {name: 'twitter:image:src', content: twitterImage || metaProps.twitterImage}
+            {name: 'og:title', content: formatPageTitle(title)},
+            {name: 'og:url', content: canonicalUrl},
+            {name: 'og:site_name', content: formatPageTitle(metaProps.serviceTitle)},
+            {name: 'og:description', content: description || metaProps.description},
+            {name: 'og:type', content: 'website'},
+            {name: 'og:image:width', content: 1200},
+            {name: 'og:image:height', content: 630},
+            {name: 'og:image', content: formatPageImage(image, canonicalUrl)}
         ]
     }
 }
 
-function generateOpenGraphMeta({description, title, facebookImage}, canonicalUrl) {
-    let tags = [
-        {name: 'og:title', content: formatPageTitle(title)},
-        {name: 'og:url', content: canonicalUrl},
-        {name: 'og:site_name', content: formatPageTitle(metaProps.serviceTitle)},
-        {name: 'og:description', content: description || metaProps.description},
-        {name: 'og:type', content: 'website'},
-        {name: 'og:image:width', content: 1200},
-        {name: 'og:image:height', content: 630},
-        {name: 'og:image', content: facebookImage || metaProps.facebookImage}
-    ]
-    return {
-        locator: 'property',
-        tags
-    }
-}
-
 function generateItemPropSchema({description, title, image}) {
     return {
         locator: 'itemprop',
         tags: [
             {name: 'name', content: title},
             {name: 'description', content: description || metaProps.description},
-            {name: 'image', content: image || metaProps.facebookImage}
+            {name: 'image', content: image || metaProps.image}
         ]
     }
 }
 
-function generateLdJsonSchema({title}) {
+function generateLdJsonSchema({title, description, image}, canonicalUrl) {
     return {
         tag: 'script',
         locator: 'type',
@@ -97,10 +93,15 @@ function generateLdJsonSchema({title}) {
                 name: 'application/ld+json',
                 content: JSON.stringify({
                     '@context': 'http://schema.org',
-                    '@type': 'WebSite',
-                    'name': domain,
-                    'alternateName': title,
-                    'url': origin
+                    '@type': 'WebPage',
+                    name: formatPageTitle(title),
+                    description: description || metaProps.description,
+                    url: canonicalUrl,
+                    thumbnailUrl: formatPageImage(image, canonicalUrl),
+                    publisher: {
+                        '@type': 'ProfilePage',
+                        name: metaProps.serviceTitle
+                    }
                 })
             }
         ]
@@ -145,23 +146,37 @@ function removeTag(selector) {
     }
 }
 
+function formatCanonicalUrl() {
+    return metaProps.origin + window.location.pathname// + location.search
+}
+
+function formatPageImage(image, canonicalUrl) {
+    if (image)
+        return image
+    if (metaProps.imageEndpoint)
+        return metaProps.imageEndpoint + canonicalUrl.replace(metaProps.origin, '')
+    return metaProps.image
+}
+
 let pageMeta = {}
 
-const tagReplacerPipeline = [generateCanonicalLink, generateDescriptionMeta, generateOpenGraphMeta, generateTwitterMeta, generateLdJsonSchema] // generateItemPropSchema
+const tagReplacerPipeline = [
+    generateCanonicalLink,
+    generateDescriptionMeta,
+    generateOpenGraphMeta,
+    generateLdJsonSchema
+] // generateItemPropSchema
 
 /**
  * Update page metadata tags
  * @param {PageMeta} meta - Page metadata
  */
-export function setPageMetadata(meta) {
+function setPageMetadata(meta) {
     if (isEqual(pageMeta, meta))
         return
-    const canonicalUrl = origin + location.pathname// + location.search
+    //generate canonical URL
+    const canonicalUrl = formatCanonicalUrl()
     document.title = formatPageTitle(meta.title)
-    if (meta.image) {
-        meta.facebookImage = meta.image
-        meta.twitterImage = meta.image
-    }
     for (const replacer of tagReplacerPipeline) {
         replaceMetaTags(replacer(meta, canonicalUrl))
     }
@@ -175,12 +190,11 @@ export function setPageMetadata(meta) {
  * Reset page metadata tags to their default values
  * @param {PageMeta} meta - Page metadata
  */
-export function resetPageMetadata(meta) {
+function resetPageMetadata(meta) {
     setPageMetadata({
         title: metaProps.serviceTitle,
         description: metaProps.description,
-        twitterImage: metaProps.twitterImage,
-        facebookImage: metaProps.facebookImage
+        image: metaProps.image
     })
     //TODO: add logic to cleanup custom page meta tags on page unload
 }
@@ -188,22 +202,32 @@ export function resetPageMetadata(meta) {
 /**
  * React hook for setting page metadata
  * @param {PageMeta} meta - Page metadata
- * @param {*[]} dependencies
  */
-export function usePageMetadata(meta, dependencies = []) {
+export function usePageMetadata(meta) {
     useEffect(() => {
         setPageMetadata(meta)
         return () => resetPageMetadata(meta)
-    }, [JSON.stringify(meta), ...dependencies])
+    }, [JSON.stringify(meta), [formatCanonicalUrl()]])
+}
+
+export function setPageNoIndex(noIndex) {
+    if (!noIndex) {
+        removeTag('meta[name=robots]')
+    } else {
+        replaceMetaTags({
+            locator: 'name',
+            tags: [
+                {name: 'robots', content: 'noindex,nofollow'}
+            ]
+        })
+    }
 }
 
 /**
  * @typedef {Object} PageMeta
  * @property {String} title - Page title
  * @property {String} description - Contents description
- * @property {String} [twitterImage] - Twitter image url
- * @property {String} [facebookImage] - Facebook image url
- * @property {String} [image] - Sets the image for both the Twitter image and the Facebook image
+ * @property {String} [image] - Page image url
  * @property {MetaTagReplacement} [customMeta] - Custom metadata tags
  */
 

package/package.json

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