diff --git a/packages/app-explorer/src/BlockByHash/Logs.tsx b/packages/app-explorer/src/BlockByHash/Logs.tsx index 103084d96d..e6c6fb62d8 100644 --- a/packages/app-explorer/src/BlockByHash/Logs.tsx +++ b/packages/app-explorer/src/BlockByHash/Logs.tsx @@ -5,7 +5,7 @@ import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; -import { Struct, Vector, getTypeDef } from '@polkadot/types/codec'; +import { Struct, Tuple, Vector, getTypeDef } from '@polkadot/types/codec'; import { DigestItem } from '@polkadot/types/Digest'; import { Params } from '@polkadot/ui-app/index'; @@ -39,28 +39,11 @@ class Logs extends React.PureComponent { let content: React.ReactNode; if (item.value instanceof Struct) { - const types: { [index: string]: string } = item.value.Type; - - const params = Object.keys(types).map((name) => ({ - name, - type: getTypeDef(types[name]) - })); - const values = item.value.toArray().map((value) => ({ - isValid: true, - value - })); - - content = ( - - ); + content = this.formatStruct(item.value); + } else if (item.value instanceof Tuple) { + content = this.formatTuple(item.value); } else if (item.value instanceof Vector) { - content = item.value.map((entry, index) => ( - {entry.toString()} - )); + content = this.formatVector(item.value); } else { content = item.value.toString().split(',').join(', '); } @@ -84,6 +67,65 @@ class Logs extends React.PureComponent { ); } + + private formatStruct (struct: Struct) { + const types: { [index: string]: string } = struct.Type; + const params = Object.keys(types).map((name) => ({ + name, + type: getTypeDef(types[name]) + })); + const values = struct.toArray().map((value) => ({ + isValid: true, + value + })); + + return ( + + ); + } + + private formatTuple (tuple: Tuple) { + const types = tuple.Types; + const params = types.map((type) => ({ + type: getTypeDef(type) + })); + const values = tuple.toArray().map((value) => ({ + isValid: true, + value + })); + + return ( + + ); + } + + private formatVector (vector: Vector) { + const type = getTypeDef(vector.Type); + const values = vector.toArray().map((value) => ({ + isValid: true, + value + })); + const params = values.map((_, index) => ({ + name: `${index}`, + type + })); + + return ( + + ); + } } export default translate(Logs); diff --git a/packages/ui-app/src/Input.tsx b/packages/ui-app/src/Input.tsx index 68ef367cf4..c105b701d3 100644 --- a/packages/ui-app/src/Input.tsx +++ b/packages/ui-app/src/Input.tsx @@ -96,8 +96,8 @@ export default class Input extends React.PureComponent { autoFocus={autoFocus} className={ isEditable - ? 'edit icon' - : '' + ? 'ui--Input edit icon' + : 'ui--Input' } defaultValue={ isUndefined(value) diff --git a/packages/ui-app/src/Params/Param/Unknown.tsx b/packages/ui-app/src/Params/Param/Unknown.tsx index f9735b4e4f..2f48d9bb36 100644 --- a/packages/ui-app/src/Params/Param/Unknown.tsx +++ b/packages/ui-app/src/Params/Param/Unknown.tsx @@ -9,6 +9,7 @@ import React from 'react'; import Static from '../../Static'; import translate from '../../translate'; +import Bare from './Bare'; import BaseBytes from './BaseBytes'; type Props = BareProps & WithNamespaces & { @@ -24,12 +25,18 @@ class Unknown extends React.PureComponent { const value = defaultValue && defaultValue.value && defaultValue.value.toString(); return ( - + + + ); } diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index 1f4d960d7c..908eedf083 100644 --- a/packages/ui-app/src/styles/components.css +++ b/packages/ui-app/src/styles/components.css @@ -184,6 +184,18 @@ header .ui--Button-Group { margin-left: 0.25rem !important; } +.ui--Input { + &.disabled { + overflow: hidden; + + input { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} + .ui--InputFile { align-items: center; background: #fff;