@stellar-expert/ui-framework 1.15.3 → 1.15.5

package/basic-styles/base.scss

@@ -1,51 +1,51 @@
-*,
-*:after,
-*:before {
-  box-sizing: border-box;
-}
-
-* {
-  @include scrollbars(6px, var(--color-dimmed), var(--color-contrast-border));
-}
-
-html {
-  font-size: 62.5%;
-  height: 100%;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  color: var(--color-text);
-  background: var(--color-bg);
-  font-family: $font-face-primary;
-  font-size: $font-size-base;
-  font-weight: $font-weight-base;
-  letter-spacing: 0.01em;
-  line-height: $font-line-height-base;
-  height: 100%;
-  overflow-x: hidden;
-  min-width: 320px;
-  margin: 0;
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-}
-
-::selection {
-  background-color: transparentize($color-primary, 0.8) !important;
-  color: var(--color-text);
-}
-
-.page-container {
-  min-height: calc(100vh - 8rem);
-  display: flex;
-  flex-direction: column;
-  /*@media (min-width: $responsive-mobile-browser-width) {
-    justify-content: center;
-  }*/
-
-  > .no-center {
-    margin-bottom: auto;
-  }
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+* {
+  @include scrollbars(6px, var(--color-dimmed), var(--color-contrast-border));
+}
+
+html {
+  font-size: 62.5%;
+  height: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-family: $font-face-primary;
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  letter-spacing: 0.01em;
+  line-height: $font-line-height-base;
+  height: 100%;
+  overflow-x: hidden;
+  min-width: 320px;
+  margin: 0;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background-color: transparentize($color-primary, 0.8) !important;
+  color: var(--color-text);
+}
+
+.page-container {
+  min-height: calc(100vh - 8rem);
+  display: flex;
+  flex-direction: column;
+  /*@media (min-width: $responsive-mobile-browser-width) {
+    justify-content: center;
+  }*/
+
+  > .no-center {
+    margin-bottom: auto;
+  }
 }

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

@@ -1,12 +1,19 @@
-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>)}
-    </>
+import React from 'react'
+import {xdrParseClaimant} from '@stellar-expert/claimable-balance-utils'
+import {AccountAddress} from '../account/account-address'
+import {CodeBlock} from '../controls/code-block'
+
+export const ClaimableBalanceClaimants = React.memo(function ClaimableBalanceClaimants({claimants}) {
+    const parsed = claimants.map(c => {
+        if (c.destination && c.predicate && !c._predicate)
+            return c
+        return xdrParseClaimant(c)
+    })
+    return <>
+        {parsed.map((c, i) => <span key={i + c.destination}>{i > 0 && ', '}
+            <AccountAddress account={c.destination}/> {typeof c.predicate === 'string' ?
+                c.predicate :
+                <div className="block-indent"><CodeBlock>{JSON.stringify(c.predicate, null, 2)}</CodeBlock></div>}
+        </span>)}
+    </>
 })

package/claimable-balance/claimable-balance-id.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import {shortenString} from '@stellar-expert/formatter'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
+
+export function ClaimableBalanceId({balance}) {
+    if (!balance)
+        return null
+    return <>{' '}
+        <a href={formatExplorerLink('claimable-balance', balance)} target="_blank">
+            {shortenString(balance)}
+        </a>
+    </>
+}

package/contract/sc-val.js

@@ -1,108 +1,108 @@
-import React from 'react'
-import cn from 'classnames'
-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'
-import './sc-val.scss'
-
-export const ScVal = React.memo(function ScVal({value, nested = false, indent = false, wrapObjects = true}) {
-    if (!nested)
-        return <code className={cn('sc-val', {block: indent})}><ScVal value={value} indent={indent} nested/></code>
-    if (!value)
-        return 'void'
-    if (typeof value === 'string') {
-        value = xdr.ScVal.fromXDR(value, 'base64')
-    }
-    if (value instanceof Array) {
-        const values = value.map((v, i) => <ScValStruct key={i} indent={indent} separate={value.length - i}>
-            <ScVal value={v} indent={indent} nested/>
-        </ScValStruct>)
-        return wrapObjects ? <>[{values}]</> : <>{values}</>
-    }
-    const val = value._value
-    switch (value._arm) {
-        case 'vec':
-            return <>[{val.map((v, i) => <ScValStruct key={i} indent={indent} separate={val.length - i}>
-                <ScVal value={v} indent={indent} nested/>
-            </ScValStruct>)}]</>
-        case 'map':
-            const values = val.map((kv, i) =>
-                <ScValStruct key={i} indent={indent} separate={val.length - i}>
-                    <ScVal value={kv.key()} indent={indent} nested/>: <ScVal value={kv.val()} indent={indent} nested/>
-                </ScValStruct>)
-            return wrapObjects ? <>&#123;{values}&#125;</> : <>{values}</>
-        case 'b':
-            return <>{val.toString()}<ScValType type="bool"/></>
-        case 'i32':
-        case 'u32':
-            return <>{val}<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 (val._arm) {
-                case 'accountId':
-                    return <AccountAddress account={xdrParserUtils.xdrParseAccountAddress(val.value())}/>
-                case 'contractId':
-                    return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(val.value())}/>
-                case 'muxedAccount':
-                    return <AccountAddress account={xdrParserUtils.xdrParseMuxedScAddress(val.value())}/>
-            }
-            return <span className="dimmed">(unsupported address)</span>
-        case 'bytes':
-            const asBytes = val.toString('base64')
-            return <><span className="condensed">{shortenString(asBytes, 86)}</span><ScValType type="bytes"/></>
-        case 'str':
-        case 'sym':
-            return <span className="word-break">"{val.toString()}"<ScValType type={value._arm}/></span>
-        case 'nonceKey':
-            return <>{val.nonce()._value.toString()}<ScValType type="nonce"/></>
-        case 'instance':
-            if (val._attributes.executable._switch.name==="contractExecutableStellarAsset")
-                return <span>StellarAsset<ScValType type="instance"/></span>
-            return <span className="word-break">{val._attributes.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></span>
-        case 'error':
-            const errMessage = value.toXDR('base64')
-            return <><span className="condensed" title={errMessage}>{shortenString(errMessage, 50)}</span><ScValType type="error"/></>
-        case 'contractId':
-            return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value)}/>
-        default:
-            switch (value._switch.name) {
-                case 'scvVoid':
-                    return '()'
-                case 'scvContractInstance':
-                    return '<ContractInstance>'
-                case 'scvLedgerKeyContractInstance':
-                    return '<LedgerKeyContractInstance>'
-                case 'scvLedgerKeyNonce':
-                    return '<LedgerKeyNonce>'
-            }
-            return <span className="dimmed">(unknown)</span>
-    }
-})
-
-export function parseScValValue(value) {
-    return xdr.ScVal.fromXDR(value, 'base64')
-}
-
-const ScValType = React.memo(function ScValType({type}) {
-    return <sub className="dimmed text-tiny" style={{padding: '0 0.2em'}}>{type}</sub>
-})
-
-export const ScValStruct = React.memo(function ScValStruct({indent, children, separate}) {
-    const separator = separate > 1 ? <>, </> : null
-    if (!indent)
-        return <>{children}{separator}</>
-    return <div className="block-indent">
-        {children}{separator}
-    </div>
-})
-
+import React from 'react'
+import cn from 'classnames'
+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'
+import './sc-val.scss'
+
+export const ScVal = React.memo(function ScVal({value, nested = false, indent = false, wrapObjects = true}) {
+    if (!nested)
+        return <code className={cn('sc-val', {block: indent})}><ScVal value={value} indent={indent} nested/></code>
+    if (!value)
+        return 'void'
+    if (typeof value === 'string') {
+        value = xdr.ScVal.fromXDR(value, 'base64')
+    }
+    if (value instanceof Array) {
+        const values = value.map((v, i) => <ScValStruct key={i} indent={indent} separate={value.length - i}>
+            <ScVal value={v} indent={indent} nested/>
+        </ScValStruct>)
+        return wrapObjects ? <>[{values}]</> : <>{values}</>
+    }
+    const val = value._value
+    switch (value._arm) {
+        case 'vec':
+            return <>[{val.map((v, i) => <ScValStruct key={i} indent={indent} separate={val.length - i}>
+                <ScVal value={v} indent={indent} nested/>
+            </ScValStruct>)}]</>
+        case 'map':
+            const values = val.map((kv, i) =>
+                <ScValStruct key={i} indent={indent} separate={val.length - i}>
+                    <ScVal value={kv.key()} indent={indent} nested/>: <ScVal value={kv.val()} indent={indent} nested/>
+                </ScValStruct>)
+            return wrapObjects ? <>&#123;{values}&#125;</> : <>{values}</>
+        case 'b':
+            return <>{val.toString()}<ScValType type="bool"/></>
+        case 'i32':
+        case 'u32':
+            return <>{val}<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 (val._arm) {
+                case 'accountId':
+                    return <AccountAddress account={xdrParserUtils.xdrParseAccountAddress(val.value())}/>
+                case 'contractId':
+                    return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(val.value())}/>
+                case 'muxedAccount':
+                    return <AccountAddress account={xdrParserUtils.xdrParseMuxedScAddress(val.value())}/>
+            }
+            return <span className="dimmed">(unsupported address)</span>
+        case 'bytes':
+            const asBytes = val.toString('base64')
+            return <><span className="condensed">{shortenString(asBytes, 86)}</span><ScValType type="bytes"/></>
+        case 'str':
+        case 'sym':
+            return <span className="word-break">"{val.toString()}"<ScValType type={value._arm}/></span>
+        case 'nonceKey':
+            return <>{val.nonce()._value.toString()}<ScValType type="nonce"/></>
+        case 'instance':
+            if (val._attributes.executable._switch.name==="contractExecutableStellarAsset")
+                return <span>StellarAsset<ScValType type="instance"/></span>
+            return <span className="word-break">{val._attributes.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></span>
+        case 'error':
+            const errMessage = value.toXDR('base64')
+            return <><span className="condensed" title={errMessage}>{shortenString(errMessage, 50)}</span><ScValType type="error"/></>
+        case 'contractId':
+            return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value)}/>
+        default:
+            switch (value._switch.name) {
+                case 'scvVoid':
+                    return '()'
+                case 'scvContractInstance':
+                    return '<ContractInstance>'
+                case 'scvLedgerKeyContractInstance':
+                    return '<LedgerKeyContractInstance>'
+                case 'scvLedgerKeyNonce':
+                    return '<LedgerKeyNonce>'
+            }
+            return <span className="dimmed">(unknown)</span>
+    }
+})
+
+export function parseScValValue(value) {
+    return xdr.ScVal.fromXDR(value, 'base64')
+}
+
+const ScValType = React.memo(function ScValType({type}) {
+    return <sub className="dimmed text-tiny" style={{padding: '0 0.2em'}}>{type}</sub>
+})
+
+export const ScValStruct = React.memo(function ScValStruct({indent, children, separate}) {
+    const separator = separate > 1 ? <>, </> : null
+    if (!indent)
+        return <>{children}{separator}</>
+    return <div className="block-indent">
+        {children}{separator}
+    </div>
+})
+
 export const primitiveTypes = new Set(['b', 'i32', 'u32', 'i256', 'u256', 'i128', 'u128', 'i64', 'u64', 'timepoint', 'duration', 'address', 'bytes', 'str', 'sym', 'nonceKey', 'contractId', 'instance'])

package/controls/button-group.scss

@@ -1,47 +1,47 @@
-@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;
-  }
+@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;
+  }
 }