From 943737338fa3bfe42429288f4fee01a94237611e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 23 Aug 2018 12:47:34 +0200
Subject: [PATCH] Decode Proposals in block explorer (#256)

* Decode Proposals in block explorer

* Render decoded read-only key/value as disabled

* Remove debug logging
---
 packages/app-democracy/src/Referendum.tsx     |  2 +
 packages/ui-app/src/Params/Param/Bare.tsx     | 24 +++++----
 packages/ui-app/src/Params/Param/Base.tsx     | 32 +++++++-----
 .../ui-app/src/Params/Param/BaseBytes.tsx     |  2 +-
 packages/ui-app/src/Params/Param/Hash.tsx     | 36 +++++++------
 packages/ui-app/src/Params/Param/Proposal.tsx | 43 +++++++++++++++
 .../src/Params/Param/StorageKeyValueArray.tsx |  1 +
 packages/ui-app/src/Params/Param/Unknown.tsx  | 52 ++++++++++---------
 .../ui-app/src/Params/Param/findComponent.ts  |  3 +-
 9 files changed, 129 insertions(+), 66 deletions(-)
 create mode 100644 packages/ui-app/src/Params/Param/Proposal.tsx

diff --git a/packages/app-democracy/src/Referendum.tsx b/packages/app-democracy/src/Referendum.tsx
index 9dff4217df..01a52306d1 100644
--- a/packages/app-democracy/src/Referendum.tsx
+++ b/packages/app-democracy/src/Referendum.tsx
@@ -110,6 +110,8 @@ class Referendum extends React.PureComponent<Props, State> {
       return null;
     }
 
+    console.error('Referendum:: best:', numberFormat(bestNumber), 'target:', numberFormat(blockNumber), 'remaining:', numberFormat(blockNumber.sub(bestNumber)));
+
     return (
       <div className='democracy--Referendum-info'>
         <Static label={t('referendum.endLabel', {
diff --git a/packages/ui-app/src/Params/Param/Bare.tsx b/packages/ui-app/src/Params/Param/Bare.tsx
index ea94da4770..e25f67de0d 100644
--- a/packages/ui-app/src/Params/Param/Bare.tsx
+++ b/packages/ui-app/src/Params/Param/Bare.tsx
@@ -9,16 +9,20 @@ import React from 'react';
 import classes from '../../util/classes';
 
 type Props = BareProps & {
-  children: any // node?
+  children: React.ReactNode
 };
 
-export default function Bare ({ children, className, style }: Props) {
-  return (
-    <div
-      className={classes('ui--row', className)}
-      style={style}
-    >
-      {children}
-    </div>
-  );
+export default class Bare extends React.PureComponent<Props> {
+  render () {
+    const { children, className, style } = this.props;
+
+    return (
+      <div
+        className={classes('ui--row', className)}
+        style={style}
+      >
+        {children}
+      </div>
+    );
+  }
 }
diff --git a/packages/ui-app/src/Params/Param/Base.tsx b/packages/ui-app/src/Params/Param/Base.tsx
index d1cabe932f..4655483150 100644
--- a/packages/ui-app/src/Params/Param/Base.tsx
+++ b/packages/ui-app/src/Params/Param/Base.tsx
@@ -18,19 +18,23 @@ type Props = BareProps & {
   withLabel?: boolean
 };
 
-export default function Base ({ children, className, isDisabled, label, size = 'medium', style, withLabel }: Props) {
-  return (
-    <Bare
-      className={className}
-      style={style}
-    >
-      <Labelled
-        className={isDisabled ? 'full' : size}
-        label={label}
-        withLabel={withLabel}
+export default class Base extends React.PureComponent<Props> {
+  render () {
+    const { children, className, isDisabled, label, size = 'medium', style, withLabel } = this.props;
+
+    return (
+      <Bare
+        className={className}
+        style={style}
       >
-        {children}
-      </Labelled>
-    </Bare>
-  );
+        <Labelled
+          className={isDisabled ? 'full' : size}
+          label={label}
+          withLabel={withLabel}
+        >
+          {children}
+        </Labelled>
+      </Bare>
+    );
+  }
 }
diff --git a/packages/ui-app/src/Params/Param/BaseBytes.tsx b/packages/ui-app/src/Params/Param/BaseBytes.tsx
index caed3b3d61..3b78c39d41 100644
--- a/packages/ui-app/src/Params/Param/BaseBytes.tsx
+++ b/packages/ui-app/src/Params/Param/BaseBytes.tsx
@@ -27,7 +27,7 @@ export default class BaseBytes extends React.PureComponent<Props> {
   render () {
     const { className, defaultValue: { value }, isDisabled, isError, label, size = 'full', style, withLabel } = this.props;
     const defaultValue = value
-      ? u8aToHex(value as Uint8Array)
+      ? u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
       : undefined;
 
     return (
diff --git a/packages/ui-app/src/Params/Param/Hash.tsx b/packages/ui-app/src/Params/Param/Hash.tsx
index fe7d7cf79a..c5219b8b48 100644
--- a/packages/ui-app/src/Params/Param/Hash.tsx
+++ b/packages/ui-app/src/Params/Param/Hash.tsx
@@ -8,20 +8,24 @@ import React from 'react';
 
 import BaseBytes from './BaseBytes';
 
-export default function Hash ({ className, defaultValue, isDisabled, isError, label, name, onChange, style, withLabel }: Props) {
-  return (
-    <BaseBytes
-      className={className}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      isError={isError}
-      label={label}
-      length={32}
-      name={name}
-      onChange={onChange}
-      size={isDisabled ? 'full' : 'medium'}
-      style={style}
-      withLabel={withLabel}
-    />
-  );
+export default class Hash extends React.PureComponent<Props> {
+  render () {
+    const { className, defaultValue, isDisabled, isError, label, name, onChange, style, withLabel } = this.props;
+
+    return (
+      <BaseBytes
+        className={className}
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        length={32}
+        name={name}
+        onChange={onChange}
+        size={isDisabled ? 'full' : 'medium'}
+        style={style}
+        withLabel={withLabel}
+      />
+    );
+  }
 }
diff --git a/packages/ui-app/src/Params/Param/Proposal.tsx b/packages/ui-app/src/Params/Param/Proposal.tsx
new file mode 100644
index 0000000000..0fa39f18b0
--- /dev/null
+++ b/packages/ui-app/src/Params/Param/Proposal.tsx
@@ -0,0 +1,43 @@
+// Copyright 2017-2018 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import { ExtrinsicDecoded } from '@polkadot/params/types';
+import { Props } from '../types';
+
+import React from 'react';
+
+import Extrinsic from '../../Extrinsic';
+import Static from '../../Static';
+import classes from '../../util/classes';
+import Bare from './Bare';
+import Unknown from './Unknown';
+
+export default class Proposal extends React.PureComponent<Props> {
+  render () {
+    const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = this.props;
+
+    if (!isDisabled) {
+      return (
+        <Unknown {...this.props} />
+      );
+    }
+
+    const proposal = value as ExtrinsicDecoded;
+    const { extrinsic: { name, section } } = proposal;
+
+    return (
+      <Bare>
+        <Static
+          className={classes(className, 'full')}
+          label={label}
+          style={style}
+          withLabel={withLabel}
+        >
+          {section}.{name}
+        </Static>
+        <Extrinsic value={proposal} />
+      </Bare>
+    );
+  }
+}
diff --git a/packages/ui-app/src/Params/Param/StorageKeyValueArray.tsx b/packages/ui-app/src/Params/Param/StorageKeyValueArray.tsx
index 74b90e183a..2bf73332fa 100644
--- a/packages/ui-app/src/Params/Param/StorageKeyValueArray.tsx
+++ b/packages/ui-app/src/Params/Param/StorageKeyValueArray.tsx
@@ -80,6 +80,7 @@ class StorageKeyValueArray extends React.PureComponent<Props, State> {
           return (
             <Bytes
               defaultValue={{ value } as RawParam}
+              isDisabled
               key={keyHex}
               label={keyHex}
               name={keyHex}
diff --git a/packages/ui-app/src/Params/Param/Unknown.tsx b/packages/ui-app/src/Params/Param/Unknown.tsx
index c37e0da177..710cb462eb 100644
--- a/packages/ui-app/src/Params/Param/Unknown.tsx
+++ b/packages/ui-app/src/Params/Param/Unknown.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 
+import { TranslationFunction } from 'i18next';
 import { Props as BareProps, RawParam } from '../types';
 
 import React from 'react';
@@ -13,38 +14,41 @@ import translate from '../../translate';
 import Base from './Base';
 
 type Props = BareProps & {
-  isDiabled?: boolean,
   defaultValue: RawParam,
-  t: any, // I18Next$Translate?
+  t: TranslationFunction,
   withLabel?: boolean
 };
 
-function Unknown ({ defaultValue: { value, type }, isDisabled, label, t, withLabel }: Props) {
-  if (isDisabled) {
+class Unknown extends React.PureComponent<Props> {
+  render () {
+    const { defaultValue: { value, type }, isDisabled, label, t, withLabel } = this.props;
+
+    if (isDisabled) {
+      return (
+        <Static
+          label={label}
+          value={(value && value.toString()) || t('unknown.empty', { defaultValue: 'empty' })}
+        />
+      );
+    }
+
     return (
-      <Static
+      <Base
+        size='full'
         label={label}
-        value={(value && value.toString()) || t('unknown.empty', { defaultValue: 'empty' })}
-      />
+        withLabel={withLabel}
+      >
+        <div className='ui--Param-Unknown ui dropdown error selection'>
+          {t('param.unknown', {
+            defaultValue: `ERROR: Unimplemented type '{{type}}' requested. No renderer exists`,
+            replace: {
+              type: typeToString(type)
+            }
+          })}
+        </div>
+      </Base>
     );
   }
-
-  return (
-    <Base
-      size='full'
-      label={label}
-      withLabel={withLabel}
-    >
-      <div className='ui--Param-Unknown ui dropdown error selection'>
-        {t('param.unknown', {
-          defaultValue: `ERROR: Unimplemented type '{{type}}' requested. No renderer exists`,
-          replace: {
-            type: typeToString(type)
-          }
-        })}
-      </div>
-    </Base>
-  );
 }
 
 export default translate(Unknown);
diff --git a/packages/ui-app/src/Params/Param/findComponent.ts b/packages/ui-app/src/Params/Param/findComponent.ts
index 789928fb94..3a89b60bd8 100644
--- a/packages/ui-app/src/Params/Param/findComponent.ts
+++ b/packages/ui-app/src/Params/Param/findComponent.ts
@@ -11,6 +11,7 @@ import Bool from './Bool';
 import Bytes from './Bytes';
 import Code from './Code';
 import Hash from './Hash';
+import Proposal from './Proposal';
 import StorageKeyValue from './StorageKeyValue';
 import StorageKeyValueArray from './StorageKeyValueArray';
 import StringParam from './String';
@@ -35,7 +36,7 @@ const components: ComponentMap = {
   'MisbehaviorReport': Unknown,
   'ParachainId': Amount,
   'PropIndex': Amount,
-  'Proposal': Unknown,
+  'Proposal': Proposal,
   'ReferendumIndex': Amount,
   'SessionKey': Amount,
   'Signature': Hash,