@stellar-expert/ui-framework 1.9.0

package/basic-styles/themes.scss

@@ -0,0 +1,59 @@
+:root {
+  --color-primary: #{$color-primary};
+  --color-highlight: #08b5e5;
+  --color-dimmed: #999;
+  --color-alert: #dc3545;
+  --color-success: #28a745;
+  --color-warning: #b27100;
+  --color-price-up: #00ba00;
+  --color-price-down: #df0000;
+  --color-modal-bg: rgba(0, 0, 0, .2);
+}
+
+:root[data-theme=day] {
+  --color-bg: #fff;
+  --color-dashboard-bg: #f5f5f5;
+  --color-alt-bg: #f2fcff;
+  --color-alt-border: #e8e8e8;
+  --color-text: #333;
+  --color-contrast-border: #d8dadb;
+  --color-border-shadow: rgba(189, 191, 192, .1);
+  --color-backdrop: rgba(0, 0, 0, .35);
+  --color-alert-bg: #f4d5d8;
+  --color-warning-bg: #ebdbbf;
+  --color-success-bg: #d0ecd6;
+}
+
+:root[data-theme=night] {
+  --color-bg: #1b414a;
+  --color-dashboard-bg: #272c2e;
+  --color-alt-bg: #12363f;
+  --color-alt-border: #2f464c;
+  --color-text: #eee;
+  --color-contrast-border: #535759;
+  --color-border-shadow: rgba(176, 185, 189, 0.1);
+  --color-backdrop: rgba(0, 0, 0, 0.25);
+  --color-alert-bg: #553d49;
+  --color-warning-bg: #484f34;
+  --color-success-bg: #1b5340;
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-success {
+  color: var(--color-success);
+}
+
+.color-warning {
+  color: var(--color-warning);
+}
+
+.color-danger {
+  color: var(--color-alert);
+}
+
+.color-alt-bg {
+  color: var(--color-alt-bg);
+}

package/basic-styles/typography.scss

@@ -0,0 +1,191 @@
+b,
+strong {
+  font-weight: bold;
+}
+
+p {
+  margin-top: 0;
+  text-align: justify;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: $font-face-header;
+  font-weight: 300;
+  letter-spacing: $header-letter-spacing;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 2.4rem;
+  line-height: 1.3;
+}
+
+h3 {
+  font-size: 2rem;
+  line-height: 1.3;
+}
+
+h4 {
+  font-size: 1.8rem;
+  letter-spacing: -0.08rem;
+  line-height: 1.35;
+}
+
+code {
+  font-family: $font-face-mono;
+  background: var(--color-alt-bg);
+  padding: 0 3px;
+  border-radius: $border-radius-input;
+}
+
+.text-small {
+  font-size: 0.85*$font-size-base !important;
+}
+
+.text-tiny {
+  font-size: 0.75*$font-size-base !important;
+}
+
+.text-large {
+  font-size: 1.125*$font-size-base !important;
+}
+
+.text-huge {
+  font-size: 1.25*$font-size-base !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+.condensed {
+  letter-spacing: -0.045em;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.text-overflow {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.vtop {
+  vertical-align: top;
+}
+
+.text-active {
+  color: var(--color-primary);
+}
+
+.dimmed,
+.label {
+  color: var(--color-dimmed);
+}
+
+.text-monospace {
+  font-family: $font-face-mono;
+}
+
+.details {
+  color: var(--color-dimmed);
+  font-size: 0.9em;
+}
+
+.error,
+.alert {
+  color: var(--color-alert);
+  background: var(--color-alert-bg);
+}
+
+.color-warning {
+  color: var(--color-warning);
+}
+
+.warning {
+  color: var(--color-warning);
+  background: var(--color-warning-bg);
+}
+
+.color-success {
+  color: var(--color-success);
+}
+
+.success {
+  color: var(--color-success);
+  background: var(--color-success-bg);
+}
+
+.trend-up {
+  color: var(--color-price-up);
+}
+
+.trend-down {
+  color: var(--color-price-down);
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid var(--color-contrast-border);
+
+  &.flare {
+    border: none;
+    font-size: $font-size-base;
+    margin: 1rem auto;
+    width: 100%;
+    max-width: 90vw;
+    height: 0;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(to right, transparent 2%, var(--color-highlight) 15%, var(--color-highlight) 85%, transparent 98%);
+    border-image-slice: 1;
+
+    &.double-space {
+      margin-bottom: $space-double;
+    }
+
+    &[title] {
+      display: flex;
+      justify-content: center;
+      overflow: visible;
+      margin: 3rem 0;
+
+      &:after {
+        content: attr(title);
+        display: table;
+        background-color: var(--color-bg);
+        margin: -0.8em 0;
+        padding: 0 0.5em;
+        text-align: center;
+        font-size: 0.85*$font-size-base;
+        color: var(--color-dimmed);
+      }
+    }
+  }
+}

package/basic-styles/variables.scss

@@ -0,0 +1,26 @@
+//fonts
+$font-face-primary: ClearSans, sans-serif !default;
+$font-face-header: 'Roboto Condensed', Arial, Helvetica, sans-serif !default;
+$font-face-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace !default;
+
+$font-size-base: 1.6rem !default;
+$font-weight-base: 300 !default;
+$font-line-height-base: 1.4285 !default;
+$header-letter-spacing: -0.02em !default;
+
+//borders
+$border-radius-input: 0.3rem !default;
+
+//spacing
+$space-standard: 2rem !default;
+$space-micro: 1rem !default;
+$space-nano: 0.5rem !default;
+$space-double: 4rem !default;
+
+$container-padding: $space-standard !default;
+
+//responsive breakpoints
+$responsive-mobile-browser-width: 992px;
+
+//basic color
+$color-primary: #0691B7 !default;

package/claimable-balance/claimable-balance-claimants.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import {xdrParseClaimant} from '@stellar-expert/claimable-balance-utils'
+import {AccountAddress} from '../account/account-address'
+
+export const ClaimableBalanceClaimants = React.memo(function ClaimableBalanceClaimants({claimants}) {
+    const parsed = claimants.map(xdrParseClaimant)
+    return <>
+        {parsed.map((c, i) => <span key={i + c.destination}>{i > 0 && ', '}
+            <AccountAddress account={c.destination}/> {c.predicate}
+        </span>)}
+    </>
+})

package/contract/sc-val.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import {xdr, scValToBigInt} from '@stellar/stellar-base'
+import {xdrParserUtils} from '@stellar-expert/tx-meta-effects-parser'
+import {shortenString} from '@stellar-expert/formatter'
+import {AccountAddress} from '../account/account-address'
+
+export function ScVal({value, nested = false}) {
+    if (!nested)
+        return <code className="sc-val"><ScVal value={value} nested/></code>
+    if (!value)
+        return 'void'
+    if (typeof value === 'string') {
+        value = xdr.ScVal.fromXDR(value, 'base64')
+    }
+    if (value instanceof Array)
+        return <>[{value.map((v, i) => <React.Fragment key={i}>{i > 0 && ', '}<ScVal value={v} nested/></React.Fragment>)}]</>
+    switch (value._arm) {
+        case 'vec':
+            return <>[{value._value.map((v, i) => <React.Fragment key={i}>{i > 0 && ', '}<ScVal value={v} nested/></React.Fragment>)}]</>
+        case 'map':
+            return <>&#123;
+                {value._value.map((kv, i) =>
+                    <React.Fragment key={i}>{i > 0 && ', '}<ScVal value={kv.key()} nested/>: <ScVal value={kv.val()} nested/></React.Fragment>)}
+                &#125;</>
+        case 'b':
+            return <>{value._value}<ScValType type="bool"/></>
+        case 'i32':
+        case 'u32':
+            return <>{value._value}<ScValType type={value._arm}/></>
+        case 'i256':
+        case 'u256':
+        case 'i128':
+        case 'u128':
+        case 'i64':
+        case 'u64':
+        case 'timepoint':
+        case 'duration':
+            return <>{scValToBigInt(value).toString()}<ScValType type={value._arm}/></>
+        case 'address':
+            switch (value._value._arm) {
+                case 'accountId':
+                    return <AccountAddress account={xdrParserUtils.xdrParseAccountAddress(value._value.value())}/>
+                case 'contractId':
+                    return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value.value())}/>
+            }
+            return <span className="dimmed">(unsupported address)</span>
+        case 'bytes':
+            const asBytes = value._value.toString('base64')
+            return <><span className="condensed">{shortenString(asBytes, 86)}</span><ScValType type="bytes"/></>
+        case 'str':
+        case 'sym':
+            return <>"{value._value.toString()}"<ScValType type={value._arm}/></>
+        case 'nonceKey':
+            return <>{value._value.nonce()._value.toString()}<ScValType type="nonce"/></>
+        case 'instance':
+            return <>{value._value.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></>
+        case 'error':
+            return <><span className="condensed">{shortenString(value.toXDR('base64'), 50)}</span><ScValType type="error"/></>
+        case 'contractId':
+            return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value)}/>
+        default:
+            if (value.switch().name === 'scvVoid')
+                return 'void'
+            return <span className="dimmed">(unknown)</span>
+    }
+}
+
+const ScValType = React.memo(function ({type}) {
+    return <sub className="dimmed text-tiny" style={{padding: '0 0.2em'}}>{type}</sub>
+})

package/contract/wasm-section-parser.js

@@ -0,0 +1,159 @@
+import xdr from '@stellar/stellar-base'
+import {XdrReader} from './xdr-reader'
+import {WasmSectionReader} from './wasm-section-reader'
+
+/**
+ * Parse contract metadata from WASM sections
+ * @param {Buffer} rawWasm
+ * @return {{}}
+ */
+export function parseContractMetadata(rawWasm) {
+    const wasmSectionReader = new WasmSectionReader(rawWasm)
+    const sections = wasmSectionReader.readCustomSections()
+    const res = {}
+    for (const section of sections) {
+        switch (section.name) {
+            case 'contractenvmetav0':
+                res.interfaceVersion = xdr.ScEnvMetaEntry.fromXDR(section.contents).value().toString()
+                break
+            case 'contractmetav0':
+                Object.assign(res, parseContractMeta(parseEntries(section.contents, xdr.ScMetaEntry)))
+                break
+            case 'contractspecv0':
+                Object.assign(res, parseSpec(parseEntries(section.contents, xdr.ScSpecEntry)))
+                break
+        }
+    }
+    return res
+}
+
+function parseEntries(buffer, xdrContract) {
+    const reader = new XdrReader(buffer)
+    const entries = []
+    while (!reader.eof) {
+        entries.push(xdrContract.read(reader))
+    }
+    return entries
+}
+
+function parseContractMeta(meta) {
+    const res = {}
+    for (const {_value} of meta) {
+        const key = _value.key().toString()
+        const val = _value.val().toString()
+        switch (key) {
+            case 'rsver':
+                res.rustVersion = val
+                break
+            case 'rssdkver':
+                res.sdkVersion = val
+                break
+        }
+    }
+    return res
+}
+
+function parseSpec(entries) {
+    const res = {}
+
+    function addSpec(key, descriptor) {
+        let spec = res[key]
+        if (spec === undefined) {
+            spec = res[key] = []
+        }
+        spec.push(descriptor)
+    }
+
+    for (const spec of entries) {
+        const value = spec.value()
+        switch (spec._arm) {
+            case 'functionV0':
+                addSpec('functions', {
+                    name: value.name().toString(),
+                    inputs: value.inputs().map(parseParameter),
+                    outputs: value.outputs().map(parseParameterType)
+                })
+                break
+            case 'udtStructV0':
+                addSpec('structs', {
+                    name: parseStructName(value),
+                    fields: value.fields().map(parseParameter)
+                })
+                break
+            case 'udtUnionV0':
+                addSpec('unions', {
+                    name: parseStructName(value),
+                    cases: value.cases().reduce((agg, c) => {
+                        const value = c.value()
+                        const caseType = {
+                            name: value.name().toString()
+                        }
+                        if (value.type) {
+                            caseType.type = value.type().map(parseParameterType)
+                        }
+                        agg[c.switch().name.replace('scSpecUdtUnionCase', '')] = caseType
+                        return agg
+                    }, {})
+                })
+                break
+            case 'udtEnumV0':
+                addSpec('enums', {
+                    name: parseStructName(value),
+                    cases: value.cases().reduce((agg, c) => {
+                        const value = c.value()
+                        agg[value.name().toString()] = value.value() //TODO: check
+                        return agg
+                    }, {})
+                })
+                break
+            case 'udtErrorEnumV0':
+                addSpec('errors', {
+                    name: parseStructName(value),
+                    cases: value.cases().map(c => ({
+                        name: c.name().toString(),
+                        value: c.value()
+                    }))
+                })
+                break
+        }
+    }
+    return res
+}
+
+function parseStructName(value) {
+    let structName = value.name().toString()
+    const lib = value.lib()
+    if (lib.length) {
+        structName += ':' + lib.toString()
+    }
+    return structName
+}
+
+function parseParameterType(type) {
+    const typeName = type.switch().name
+    switch (typeName) {
+        case 'scSpecTypeOption':
+            return `option<${parseParameterType(type.valueType())}>`
+        case 'scSpecTypeBytesN':
+            return `bytesn<${type.value().n()}>`
+        case 'scSpecTypeVec':
+            return `vec<${parseParameterType(type.value().elementType())}>`
+        case 'scSpecTypeMap':
+            return `map<${parseParameterType(type.value().keyType())},${parseParameter(type.value().valueType())}>`
+        case 'scSpecTypeResult':
+            return `result<${parseParameterType(type.value().okType())},${parseParameter(type.value().errorType())}>`
+        case 'scSpecTypeTuple':
+            return `tuple<${type.value().valueTypes().map(parseParameterType).join()}>`
+        case 'scSpecTypeUdt':
+            return `udt<${type.value().name()}>`
+        default:
+            return typeName.replace('scSpecType', '').toLowerCase()
+    }
+}
+
+function parseParameter(param) {
+    return {
+        name: param.name().toString(),
+        type: parseParameterType(param.type())
+    }
+}

package/contract/wasm-section-reader.js

@@ -0,0 +1,79 @@
+/**
+ * Minimalistic WASM metadata reader
+ */
+export class WasmSectionReader {
+    constructor(data) {
+        this.data = data
+    }
+
+    /**
+     * @type {Buffer}
+     * @private
+     */
+    data
+    /**
+     * Current reader position
+     * @type {number}
+     * @private
+     */
+    pointer = 8
+
+    /**
+     * Read custom metadata sections from raw WASM
+     * @return {{name: string, contents: Buffer}[]}
+     */
+    readCustomSections() {
+        const sections = []
+        while (this.pointer < this.data.length) {
+            const sectionType = this.readUint8()
+            let length = this.readVarUint32()
+            if (sectionType === 0) { //accumulate only custom sections
+                const sectionStart = this.pointer
+                const name = this.readString()
+                length -= this.pointer - sectionStart
+                sections.push({
+                    name,
+                    contents: this.data.subarray(this.pointer, this.pointer + length)
+                })
+            }
+            this.pointer += length
+        }
+        return sections
+    }
+
+    /**
+     * @return {number}
+     * @private
+     */
+    readUint8() {
+        return this.data.readUint8(this.pointer++)
+    }
+
+    /**
+     * @return {number}
+     * @private
+     */
+    readVarUint32() {
+        let result = 0
+        let shift = 0
+        while (true) {
+            let byte = this.readUint8()
+            result |= (byte & 0x7f) << shift
+            shift += 7
+            if ((byte & 0x80) === 0)
+                break
+        }
+        return result >>> 0
+    }
+
+    /**
+     * @return {string}
+     * @private
+     */
+    readString() {
+        const length = this.readVarUint32()
+        const contents = this.data.subarray(this.pointer, this.pointer + length)
+        this.pointer += length
+        return contents.toString('utf-8')
+    }
+}