@stellar-expert/ui-framework 1.9.0

package/contract/xdr-reader.js

@@ -0,0 +1,148 @@
+export class XdrReader {
+    /**
+     * @constructor
+     * @param {Buffer} source - Buffer containing serialized data
+     */
+    constructor(source) {
+        if (!Buffer.isBuffer(source)) {
+            if (source instanceof Array) {
+                source = Buffer.from(source)
+            } else
+                throw new Error('Source not specified')
+        }
+
+        this._buffer = source
+        this._length = source.length
+        this._index = 0
+    }
+
+    /**
+     * @type {Buffer}
+     * @private
+     * @readonly
+     */
+    _buffer
+    /**
+     * @type {Number}
+     * @private
+     * @readonly
+     */
+    _length
+    /**
+     * @type {Number}
+     * @private
+     * @readonly
+     */
+    _index
+
+    /**
+     * Check if the reader reached the end of the input buffer
+     * @return {Boolean}
+     */
+    get eof() {
+        return this._index === this._length
+    }
+
+    /**
+     * Advance reader position, check padding and overflow
+     * @param {Number} size - Bytes to read
+     * @return {Number} Position to read from
+     * @private
+     */
+    advance(size) {
+        const from = this._index
+        // advance cursor position
+        this._index += size
+        // check buffer boundaries
+        if (this._length < this._index)
+            throw new Error(
+                'attempt to read outside the boundary of the buffer'
+            )
+        // check that padding is correct for Opaque and String
+        const padding = 4 - (size % 4 || 4)
+        if (padding > 0) {
+            for (let i = 0; i < padding; i++)
+                if (this._buffer[this._index + i] !== 0)
+                    // all bytes in the padding should be zeros
+                    throw new Error('Invalid padding')
+            this._index += padding
+        }
+        return from
+    }
+
+    /**
+     * Reset reader position
+     * @return {void}
+     */
+    rewind() {
+        this._index = 0
+    }
+
+    /**
+     * Read byte array from the buffer
+     * @param {Number} size - Bytes to read
+     * @return {Buffer} - Sliced portion of the underlying buffer
+     */
+    read(size) {
+        const from = this.advance(size)
+        return this._buffer.subarray(from, from + size)
+    }
+
+    /**
+     * Read i32 from buffer
+     * @return {Number}
+     */
+    readInt32BE() {
+        return this._buffer.readInt32BE(this.advance(4))
+    }
+
+    /**
+     * Read u32 from buffer
+     * @return {Number}
+     */
+    readUInt32BE() {
+        return this._buffer.readUInt32BE(this.advance(4))
+    }
+
+    /**
+     * Read i64 from buffer
+     * @return {BigInt}
+     */
+    readBigInt64BE() {
+        return this._buffer.readBigInt64BE(this.advance(8))
+    }
+
+    /**
+     * Read u64 from buffer
+     * @return {BigInt}
+     */
+    readBigUInt64BE() {
+        return this._buffer.readBigUInt64BE(this.advance(8))
+    }
+
+    /**
+     * Read float from buffer
+     * @return {Number}
+     */
+    readFloatBE() {
+        return this._buffer.readFloatBE(this.advance(4))
+    }
+
+    /**
+     * Read double from buffer
+     * @return {Number}
+     */
+    readDoubleBE() {
+        return this._buffer.readDoubleBE(this.advance(8))
+    }
+
+    /**
+     * Ensure that input buffer has been consumed in full, otherwise it's a type mismatch
+     * @return {void}
+     * @throws {Error}
+     */
+    ensureInputConsumed() {
+        if (this._index !== this._length)
+            throw new Error(`Invalid XDR contract typecast - source buffer not entirely consumed`)
+    }
+}

package/controls/active-icon.scss

@@ -0,0 +1,23 @@
+.active-icon {
+  display: inline-block;
+  padding: 0 .3em;
+  position: relative;
+
+  &:active {
+    color: var(--color-bg);
+    outline: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -.1em;
+      left: .15em;
+      width: 1.5em;
+      height: 1.5em;
+      border-radius: 50%;
+      background: var(--color-highlight);
+      z-index: -1;
+    }
+  }
+}

package/controls/button-group.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button-group.scss'
+
+export const ButtonGroup = React.memo(function ButtonGroup({inline, children, ...otherProps}) {
+    if (inline)
+        return <span className="button-group" {...otherProps}>{children}</span>
+    return <div className="button-group" {...otherProps}>{children}</div>
+})
+
+ButtonGroup.propTypes = {
+    /**
+     * Nested buttons
+     */
+    children: PropTypes.any.isRequired,
+    /**
+     * Whether to render the group as inline element (span)
+     */
+    inline: PropTypes.bool
+}

package/controls/button-group.scss

@@ -0,0 +1,48 @@
+@use "../basic-styles/variables";
+@import "./button";
+
+.button-group {
+  > * {
+    vertical-align: top;
+  }
+
+  &:not(:last-child) {
+    margin-right: $button-spacing;
+  }
+
+  & > button,
+  & > .button {
+    + .button {
+      margin-left: -0.76em;
+
+      &.small {
+        margin-left: -0.96em;
+      }
+
+      &:before {
+        border-left: 2px solid var(--color-primary);
+      }
+    }
+
+    &.selected {
+      &.disabled,
+      &[disabled] {
+        cursor: pointer;
+        color: var(--color-text);
+        opacity: 1;
+
+        &:before {
+          background: var(--color-primary);
+        }
+      }
+    }
+
+    &:not(:last-child) {;
+      margin-right: 0;
+    }
+  }
+
+  & > :not(:last-child) > .button {
+    margin-right: 0;
+  }
+}

package/controls/button.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './button.scss'
+
+export const Button = React.memo(function Button({href, onClick, block, outline, clear, stackable, small, disabled, className, children, ...op}) {
+    const c = cn('button', {
+        small,
+        disabled,
+        'button-block': block,
+        'button-outline': outline,
+        'button-clear': clear,
+        stackable
+    }, className)
+    const props = {className: c, onClick, ...op}
+    if (href) {
+        props.onClick = function (e) {
+            e.preventDefault()
+            return false
+        }
+        return <a href={href} {...props}>{children}</a>
+    }
+    if (disabled) {
+        props.disabled = true
+    }
+    return <button {...props}>{children}</button>
+})
+
+Button.propTypes = {
+    /**
+     * Button link - renders the button as A tag; if not set, BUTTON tag is rendered instead
+     */
+    href: PropTypes.string,
+    /**
+     * Click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     * Whether to render the button as block element
+     */
+    block: PropTypes.bool,
+    /**
+     * Render only a thin outline instead of the color-filled button
+     */
+    outline: PropTypes.bool,
+    /**
+     * Do not render an outline - just the text
+     */
+    clear: PropTypes.bool,
+    /**
+     * Whether buttons should look stackable on mobile devices
+     */
+    stackable: PropTypes.bool,
+    /**
+     * Renders a small button
+     */
+    small: PropTypes.bool,
+    /**
+     * Whether the button is currently disabled
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Externally provided CSS classes
+     */
+    className: PropTypes.string,
+    /**
+     * Tooltip text
+     */
+    title: PropTypes.string,
+    /**
+     * Text inside the button
+     */
+    children: PropTypes.any.isRequired
+}

package/controls/button.scss

@@ -0,0 +1,148 @@
+@use "../basic-styles/variables";
+
+$button-spacing: 0.5rem;
+
+.button,
+button {
+  border: none;
+  color: var(--color-bg);
+  background: none;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-base;
+  font-weight: 400;
+  font-family: $font-face-primary;
+  height: 2.4em;
+  min-width: 6em;
+  line-height: 2.4em;
+  padding: 0 1.4em;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  margin-right: $button-spacing;
+  margin-bottom: 0.5em;
+  position: relative;
+  z-index: 0;
+  user-select: none;
+
+  &.button-block {
+    display: block;
+    width: 100%;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &.small {
+    font-size: 1.25rem;
+    padding: 0 1em;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    background: var(--color-highlight);
+    border: none;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 6px;
+    width: calc(100% - 12px);
+    height: 100%;
+    transform: skew(-20deg);
+  }
+
+  &:focus {
+    outline: 0;
+    background: none !important;
+  }
+
+  &:hover {
+    color: var(--color-bg);
+    &:before {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+  }
+
+  &:active {
+    &:before {
+      top: 1px;
+      left: 7px;
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+  }
+
+  &[disabled],
+  &.disabled {
+    cursor: default !important;
+    opacity: 0.7;
+
+    &:hover,
+    &:active {
+      &:before {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        top: 0;
+        left: 6px;
+      }
+    }
+  }
+
+  &.button-outline {
+    color: var(--color-highlight);
+
+    &:before {
+      border: 1px solid var(--color-highlight);
+      background: var(--color-bg);
+    }
+
+    &:hover {
+      &:before {
+        background: var(--color-bg);
+        border-color: var(--color-primary);
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      &:focus,
+      &:hover {
+        color: var(--color-highlight);
+      }
+      &:before {
+        background: var(--color-bg);
+        border-color: var(--color-highlight);
+      }
+    }
+  }
+
+  &.button-clear {
+    color: var(--color-highlight);
+
+    &:focus,
+    &:hover {
+      color: var(--color-primary);
+    }
+
+    &[disabled],
+    &.disabled {
+      &:focus,
+      &:hover {
+        color: var(--color-highlight);
+      }
+    }
+  }
+}
+
+@media (max-width: $responsive-mobile-browser-width) {
+  button,
+  .button {
+    &.stackable {
+      display: block;
+      width: 100%;
+    }
+  }
+}

package/controls/code-block.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import hljs from 'highlight.js/lib/core'
+import jsLang from 'highlight.js/lib/languages/javascript'
+import jsonLang from 'highlight.js/lib/languages/json'
+import xmlLang from 'highlight.js/lib/languages/xml'
+import plaintextLang from 'highlight.js/lib/languages/plaintext'
+import tomlLang from 'highlight.js/lib/languages/ini'
+import rustLang from 'highlight.js/lib/languages/rust'
+import './code-block.scss'
+
+hljs.registerLanguage('js', jsLang)
+hljs.registerLanguage('json', jsonLang)
+hljs.registerLanguage('html', xmlLang)
+hljs.registerLanguage('xml', xmlLang)
+hljs.registerLanguage('plain', plaintextLang)
+hljs.registerLanguage('toml', tomlLang)
+hljs.registerLanguage('rust', rustLang)
+
+export const CodeBlock = React.memo(function CodeBlock({children, lang, className, style}) {
+    if (lang) {
+        lang = lang.split(',')
+    }
+    const languageFilter = lang || ['js', 'json']
+    const highlighted = hljs.highlightAuto(children, languageFilter)
+    return <pre dangerouslySetInnerHTML={{__html: highlighted.value}} className={cn('hljs', className)} style={style}/>
+})
+
+CodeBlock.propTypes = {
+    children: PropTypes.string.isRequired,
+    lang: PropTypes.oneOf(['js', 'json', 'html', 'xml', 'toml', 'rust', 'plain']),
+    className: PropTypes.string,
+    style: PropTypes.object
+}

package/controls/code-block.scss

@@ -0,0 +1,74 @@
+@use "../basic-styles/variables";
+
+.hljs {
+  background: #1f2d34;
+  color: #BABABA;
+  font-size: 0.875*$font-size-base;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  display: block;
+  overflow-x: auto;
+  padding: $space-micro $space-standard;
+  border: 1px solid var(--color-contrast-border);
+  border-radius: $border-radius-input;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-link,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #6896BA;
+}
+
+.hljs-code,
+.hljs-selector-class {
+  color: #A6E22E;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #A8A8A2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-attribute,
+.hljs-name,
+.hljs-variable {
+  color: #CB7832;
+}
+
+.hljs-params {
+  color: #B9B9B9;
+}
+
+.hljs-string {
+  color: #6A8759;
+}
+
+.hljs-subst,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-symbol,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #E0C46C;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #7F7F7F;
+}