Fix AccountIndex, Tuple & Vector disabled displays (#647)

* Fix AccountIndex, Tuple & Vector disabled displays

* Fix Log rendering with U8a

* Fix AddressSummary child block display

packages/app-explorer/src/BlockByHash/Logs.tsx

@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { Struct, Tuple, Vector, getTypeDef } from '@polkadot/types/codec';
+import { Struct, Tuple, U8a, Vector, getTypeDef } from '@polkadot/types/codec';
 import { DigestItem } from '@polkadot/types/Digest';
 import Params from '@polkadot/ui-params/index';
 
@@ -42,6 +42,8 @@ class Logs extends React.PureComponent<Props> {
       content = this.formatTuple(item.value);
     } else if (item.value instanceof Vector) {
       content = this.formatVector(item.value);
+    } else if (item.value instanceof U8a) {
+      content = this.formatU8a(item.value);
     } else {
       content = item.value.toString().split(',').join(', ');
     }
@@ -65,6 +67,16 @@ class Logs extends React.PureComponent<Props> {
     );
   }
 
+  private formatU8a (value: U8a) {
+    return (
+      <Params
+        isDisabled
+        params={[{ type: getTypeDef('Bytes') }]}
+        values={[{ isValid: true, value }]}
+      />
+    );
+  }
+
   private formatStruct (struct: Struct) {
     const types: { [index: string]: string } = struct.Type;
     const params = Object.keys(types).map((name) => ({

packages/ui-app/src/AddressSummary.tsx

@@ -196,8 +196,8 @@ class AddressSummary extends React.PureComponent<Props> {
     }
 
     return (
-      <div className='ui--hover'>
-        <div className='ui--AddressSummary-children ui--hover-content'>
+      <div className='ui--AddressSummary-children ui--hover'>
+        <div className='ui--hover-content'>
           {children}
         </div>
       </div>

packages/ui-app/src/styles/components.css

@@ -95,7 +95,9 @@ header .ui--Button-Group {
 }
 
 .ui--AddressSummary-children {
-  margin-top: 0.5rem !important;
+  .ui--hover-content {
+    margin-top: 0.5rem !important;
+  }
 }
 
 .ui--AddressRow .ui--AddressSummary-children {

packages/ui-params/src/Param/Amount.tsx

@@ -6,6 +6,7 @@ import { Props } from '../types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { AccountIndex } from '@polkadot/types';
 import { Input } from '@polkadot/ui-app/index';
 import numberFormat from '@polkadot/ui-reactive/util/numberFormat';
 import { bnToBn } from '@polkadot/util';
@@ -16,11 +17,13 @@ export default class Amount extends React.PureComponent<Props> {
   render () {
     const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
     const defaultValue = isDisabled
-      ? numberFormat(value)
+      ? (
+        value instanceof AccountIndex
+          ? value.toString()
+          : numberFormat(value)
+      )
       : bnToBn((value as number) || 0).toString();
 
-    console.error('vlue', value, defaultValue);
-
     return (
       <Bare
         className={className}

packages/ui-params/src/Param/Tuple.tsx

@@ -31,7 +31,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps ({ defaultValue, type: { sub, type } }: Props, prevState: State): Partial<State> | null {
+  static getDerivedStateFromProps ({ defaultValue: { value }, type: { sub, type } }: Props, prevState: State): Partial<State> | null {
     if (type === prevState.type) {
       return null;
     }
@@ -39,22 +39,27 @@ export default class Tuple extends React.PureComponent<Props, State> {
     const subTypes = sub && Array.isArray(sub)
       ? sub
       : [];
+    const values = (value as Array<any>).map((value) =>
+      isUndefined(value) || isUndefined(value.isValid)
+        ? {
+          isValid: !isUndefined(value),
+          value
+        }
+        : value
+    );
 
     return {
       Components: subTypes.map((type) => findComponent(type)),
       sub: subTypes.map(({ type }) => type),
       subTypes,
       type,
-      values: (defaultValue.value as Array<any>).map((value) => ({
-        isValid: !isUndefined(value),
-        value
-      }))
+      values
     };
   }
 
   render () {
-    const { className, defaultValue: { value = [] }, isDisabled, style, withLabel } = this.props;
-    const { Components, sub, subTypes } = this.state;
+    const { className, isDisabled, style, withLabel } = this.props;
+    const { Components, sub, subTypes, values } = this.state;
 
     return (
       <Bare
@@ -63,7 +68,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
       >
         {Components.map((Component, index) => (
           <Component
-            defaultValue={value[index] || {}}
+            defaultValue={values[index] || {}}
             isDisabled={isDisabled}
             key={index}
             label={sub[index]}

packages/ui-params/src/Param/Vector.tsx

@@ -38,19 +38,21 @@ class Vector extends React.PureComponent<Props, State> {
       return null;
     }
 
+    const values = isDisabled || prevState.values.length === 0
+      ? value.map((value: any) =>
+          isUndefined(value) || isUndefined(value.isValid)
+            ? {
+              isValid: !isUndefined(value),
+              value
+            }
+            : value
+        )
+      : prevState.values;
+
     return {
       Component: findComponent(sub as TypeDef),
       type,
-      values: isDisabled || prevState.values.length === 0
-        ? value.map((value: any) =>
-            isUndefined(value) || isUndefined(value.isValid)
-              ? {
-                isValid: isUndefined(value),
-                value
-              }
-              : value
-          )
-        : prevState.values
+      values
     };
   }
 

packages/ui-params/src/Param/findComponent.ts

@@ -44,13 +44,14 @@ const components: ComponentMap = {
   'PropIndex': Amount,
   'Proposal': Proposal,
   'ReferendumIndex': Amount,
-  'SessionKey': Amount,
+  'SessionKey': Account,
   'Signature': Hash,
   'String': Text,
   'Text': Text,
   'Tuple': Tuple,
   'u32': Amount,
   'u64': Amount,
+  'u128': Amount,
   'Vector': Vector,
   'Vote': Vote,
   'VoteIndex': Amount,