Format storage entries in a div (#197)

* Format storage entries in div (with icons)

* Update queries to have same alignment

packages/app-storage/src/Query.tsx

@@ -78,7 +78,12 @@ class Query extends React.PureComponent<Props, State> {
         <Labelled
           className='storage--actionrow-value'
           label={
-            <div>{key.section}.{key.name}({inputs}): {typeToString(key.type)}</div>
+            <div className='ui--Param-text'>
+              <div className='ui--Param-text name'>{key.section}.{key.name}(</div>
+              {inputs}
+              <div className='ui--Param-text name'>):</div>
+              <div className='ui--Param-text'>{typeToString(key.type)}</div>
+            </div>
           }
         >
           <Component />

packages/app-storage/src/index.css

@@ -46,3 +46,8 @@
   flex: 0;
   padding: 0 0.25rem;
 }
+
+.storage--Queries .storage--actionrow-button .ui.label {
+  font-size: 1rem;
+  line-height: 1.714rem;
+}

packages/ui-app/src/Params/Params.css

@@ -2,15 +2,11 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
-.ui--Params {}
-
 .ui--Params-Content {
   box-sizing: border-box;
   padding-left: 2em;
 }
 
-.ui--Param {}
-
 .ui--Param-File {
   align-items: center;
   border: 1px dashed rgba(34, 36, 38, 0.15);
@@ -35,3 +31,30 @@
 .ui--Param-File .label {
   color: rgba(0, 0, 0, .6);
 }
+
+.ui--Param-text {
+  display: inline-block;
+  font-size: 1rem;
+  line-height: 1.714rem;
+}
+
+.ui--Param-text .icon {
+  margin-right: 0.5rem !important;
+}
+
+.ui--Param-text * {
+  vertical-align: middle;
+}
+
+.ui--Param-text.nowrap {
+  white-space: nowrap;
+}
+
+.ui--Param-text.name {
+  color: rgba(0, 0, 0, .6);
+  font-style: italic;
+}
+
+.ui--Param-text + .ui--Param-text {
+  margin-left: 0.5rem;
+}

packages/ui-app/src/Params/valueToText.tsx

@@ -4,6 +4,10 @@
 
 import { Param$Types, Param$Type$Array, ExtrinsicDecoded } from '@polkadot/params/types';
 
+import './Params.css';
+
+import React from 'react';
+import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import addressEncode from '@polkadot/util-keyring/address/encode';
 import u8aToHex from '@polkadot/util/u8a/toHex';
@@ -11,50 +15,96 @@ import isBn from '@polkadot/util/is/bn';
 import isU8a from '@polkadot/util/is/u8a';
 import isUndefined from '@polkadot/util/is/undefined';
 
+import classes from '../util/classes';
 import { textMap as thresholdTextMap } from './Param/VoteThreshold';
 
-function proposalToText ({ extrinsic, params }: ExtrinsicDecoded): string {
+const empty = div('<empty>');
+const unknown = div('<unknown>');
+
+function divWithClass (className: string, ...values: Array<React.ReactNode>): React.ReactNode {
+  return (
+    <div className={classes('ui--Param-text', className)}>
+      {values}
+    </div>
+  );
+}
+
+function div (...values: Array<React.ReactNode>): React.ReactNode {
+  return divWithClass.apply(
+    null, [undefined as React.ReactNode].concat(values)
+  );
+}
+
+function accountToText (publicKey: Uint8Array): React.ReactNode {
+  const address = addressEncode(publicKey);
+
+  return divWithClass(
+    'nowrap',
+    <IdentityIcon
+      className='icon'
+      size={24}
+      value={address}
+    />,
+    address
+  );
+}
+
+function proposalToText ({ extrinsic, params }: ExtrinsicDecoded): React.ReactNode {
   if (!extrinsic) {
-    return '<unknown>';
+    return unknown;
   }
 
   const inputs = extrinsic.params.map(({ name, type }, index) =>
-    `${name}=${valueToText(type, params[index])}`
-  ).join(', ');
+    div(
+      divWithClass('name', `${name}=`),
+      valueToText(type, params[index])
+    )
+  );
 
-  return `${extrinsic.section}.${extrinsic.name}(${inputs})`;
+  return div(
+    divWithClass('name', `${extrinsic.section}.${extrinsic.name}(`),
+    inputs,
+    divWithClass('name', ')')
+  );
 }
 
-function arrayToText (type: Param$Type$Array, value: Array<any>, withBound: boolean = true): string {
+function arrayToText (type: Param$Type$Array, value: Array<any>, withBound: boolean = true): React.ReactNode {
   if (value.length === 0) {
-    return 'empty';
+    return empty;
   }
 
   if (type.length === 1) {
     if (type[0] === 'KeyValueStorage') {
-      return `${value.length}`;
+      return div(value.length);
     }
 
     return value.map((value, index) =>
-      `${index}: ${valueToText(type[0], value, false)}`
-    ).join(', ');
+      div(
+        divWithClass('name', `${index}:`),
+        valueToText(type[0], value, false)
+      )
+    );
   }
 
   const values = type.map((_type, index) =>
     valueToText(_type, value[index], false)
-  ).join(', ');
+  );
 
-  return `(${values})`;
+  return div(
+    divWithClass('name', '('),
+    values,
+    divWithClass('name', ')')
+  );
 }
 
-function valueToText (type: Param$Types, value: any, swallowError: boolean = true): string {
+function valueToText (type: Param$Types, value: any, swallowError: boolean = true): React.ReactNode {
   try {
     if (type === 'bool') {
-      return value ? 'Yes' : 'No';
+      return div(value ? 'Yes' : 'No');
     }
 
     if (isUndefined(value)) {
-      return 'unknown';
+      return unknown;
     }
 
     if (Array.isArray(type)) {
@@ -63,8 +113,8 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru
 
     if (type === 'AccountId') {
       return value && value.length
-        ? addressEncode(value as Uint8Array)
-        : '<none>';
+        ? accountToText(value as Uint8Array)
+        : unknown;
     }
 
     if (type === 'Proposal') {
@@ -72,15 +122,15 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru
     }
 
     if (type === 'VoteThreshold') {
-      return thresholdTextMap[value];
+      return div(thresholdTextMap[value]);
     }
 
     if (isU8a(value)) {
-      return u8aToHex(value, 256);
+      return div(u8aToHex(value, 256));
     }
 
     if (isBn(value)) {
-      return numberFormat(value);
+      return div(numberFormat(value));
     }
   } catch (error) {
     if (!swallowError) {
@@ -90,7 +140,7 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru
     }
   }
 
-  return value.toString();
+  return div(value.toString());
 }
 
 export default valueToText;