From 4950250b0d51f8ea5b2e545ad844a0f21eb0a9c0 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 14 Apr 2020 10:05:14 +0200
Subject: [PATCH] Static output formatting adjustments (#2566)

---
 packages/react-components/src/Output.tsx   |  1 +
 packages/react-params/src/Param/Static.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/Output.tsx b/packages/react-components/src/Output.tsx
index d38969f465..470dfe7d10 100644
--- a/packages/react-components/src/Output.tsx
+++ b/packages/react-components/src/Output.tsx
@@ -53,6 +53,7 @@ function Output ({ children, className, help, isError, isHidden, isMonospace, la
 
 export default React.memo(styled(Output)`
   pre {
+    margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/packages/react-params/src/Param/Static.tsx b/packages/react-params/src/Param/Static.tsx
index 4de67b514d..10fed06c8b 100644
--- a/packages/react-params/src/Param/Static.tsx
+++ b/packages/react-params/src/Param/Static.tsx
@@ -5,6 +5,7 @@
 import { Props as BareProps, RawParam } from '../types';
 
 import React from 'react';
+import styled from 'styled-components';
 import { Static } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
@@ -19,7 +20,11 @@ interface Props extends BareProps {
 
 function StaticParam ({ asHex, children, className, defaultValue, label, style }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
+  const value = defaultValue && defaultValue.value && (
+    asHex
+      ? defaultValue.value.toHex()
+      : JSON.stringify(defaultValue.value.toHuman(), null, 2).replace(/"/g, '')
+  );
 
   return (
     <Bare
@@ -29,11 +34,17 @@ function StaticParam ({ asHex, children, className, defaultValue, label, style }
       <Static
         className='full'
         label={label}
-        value={value || t('<empty>')}
+        value={<pre>{value || t('<empty>')}</pre>}
       />
       {children}
     </Bare>
   );
 }
 
-export default React.memo(StaticParam);
+export default React.memo(styled(StaticParam)`
+  pre {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`);