@stellar-expert/ui-framework 1.9.2 → 1.9.4

package/contract/sc-val.js

@@ -1,32 +1,40 @@
 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 function ScVal({value, nested = false}) {
+export const ScVal = React.memo(function ScVal({value, nested = false, indent = false}) {
     if (!nested)
-        return <code className="sc-val"><ScVal value={value} nested/></code>
+        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)
-        return <>[{value.map((v, i) => <React.Fragment key={i}>{i > 0 && ', '}<ScVal value={v} nested/></React.Fragment>)}]</>
+        return <>[{value.map((v, i) => <ScValStruct key={i} indent={indent} separate={value.length - i}>
+            <ScVal value={v} indent={indent} nested/>
+        </ScValStruct>)}]</>
+    const val = value._value
     switch (value._arm) {
         case 'vec':
-            return <>[{value._value.map((v, i) => <React.Fragment key={i}>{i > 0 && ', '}<ScVal value={v} nested/></React.Fragment>)}]</>
+            return <>[{val.map((v, i) => <ScValStruct key={i} indent={indent} separate={val.length - i}>
+                <ScVal value={v} indent={indent} nested/>
+            </ScValStruct>)}]</>
         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>)}
+            return <>&#123;{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>)}
                 &#125;</>
         case 'b':
-            return <>{value._value}<ScValType type="bool"/></>
+            return <>{val.toString()}<ScValType type="bool"/></>
         case 'i32':
         case 'u32':
-            return <>{value._value}<ScValType type={value._arm}/></>
+            return <>{val}<ScValType type={value._arm}/></>
         case 'i256':
         case 'u256':
         case 'i128':
@@ -37,34 +45,44 @@ export function ScVal({value, nested = false}) {
         case 'duration':
             return <>{scValToBigInt(value).toString()}<ScValType type={value._arm}/></>
         case 'address':
-            switch (value._value._arm) {
+            switch (val._arm) {
                 case 'accountId':
-                    return <AccountAddress account={xdrParserUtils.xdrParseAccountAddress(value._value.value())}/>
+                    return <AccountAddress account={xdrParserUtils.xdrParseAccountAddress(val.value())}/>
                 case 'contractId':
-                    return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(value._value.value())}/>
+                    return <AccountAddress account={xdrParserUtils.xdrParseContractAddress(val.value())}/>
             }
             return <span className="dimmed">(unsupported address)</span>
         case 'bytes':
-            const asBytes = value._value.toString('base64')
+            const asBytes = val.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}/></>
+            return <>"{val.toString()}"<ScValType type={value._arm}/></>
         case 'nonceKey':
-            return <>{value._value.nonce()._value.toString()}<ScValType type="nonce"/></>
+            return <>{val.nonce()._value.toString()}<ScValType type="nonce"/></>
         case 'instance':
-            return <>{value._value.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></>
+            return <>{val.executable.wasmHash().toString('hex')}<ScValType type="wasm"/></>
         case 'error':
-            return <><span className="condensed">{shortenString(value.toXDR('base64'), 50)}</span><ScValType type="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:
             if (value.switch().name === 'scvVoid')
-                return 'void'
+                return '()'
             return <span className="dimmed">(unknown)</span>
     }
-}
+})
 
-const ScValType = React.memo(function ({type}) {
+const ScValType = React.memo(function ScValType({type}) {
     return <sub className="dimmed text-tiny" style={{padding: '0 0.2em'}}>{type}</sub>
+})
+
+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>
 })

package/contract/sc-val.scss

@@ -0,0 +1,3 @@
+.sc-val {
+  line-height: 1;
+}

package/index.js

@@ -82,3 +82,4 @@ export * from './effect/effect-description'
 //Stellar-specific utils
 export * from './stellar/key-type'
 export * from './stellar/signature-hint-utils'
+export * from './contract/sc-val'

package/package.json

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