From df0c3ba9df905b23bf1eed5e15439acabc258051 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 15 Dec 2022 10:04:08 +0200
Subject: [PATCH] Display Call hashes on disabled items (#8544)

---
 packages/react-components/src/Call.tsx   | 11 ++++++++---
 packages/react-params/src/Param/Call.tsx |  9 ++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx
index e3549b164b..da40be19c4 100644
--- a/packages/react-components/src/Call.tsx
+++ b/packages/react-components/src/Call.tsx
@@ -21,6 +21,7 @@ export interface Props {
   labelHash?: React.ReactNode;
   labelSignature?: React.ReactNode;
   mortality?: string;
+  noIndent?: boolean;
   onError?: () => void;
   value: IExtrinsic | IMethod;
   withBorder?: boolean;
@@ -84,7 +85,7 @@ function extractState (value: IExtrinsic | IMethod, withHash?: boolean, withSign
   return { hash, params, signature, signatureType, values };
 }
 
-function Call ({ children, className = '', labelHash, labelSignature, mortality, onError, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> {
+function Call ({ children, className = '', labelHash, labelSignature, mortality, noIndent, onError, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ hash, params, signature, signatureType, values }, setExtracted] = useState<Extracted>({ hash: null, params: [], signature: null, signatureType: null, values: [] });
 
@@ -103,7 +104,7 @@ function Call ({ children, className = '', labelHash, labelSignature, mortality,
         withBorder={withBorder}
       />
       {children}
-      <div className='ui--Extrinsic--toplevel'>
+      <div className={`ui--Extrinsic--toplevel${noIndent ? ' noIndent' : ''}`}>
         {signature && (
           <Static
             className='hash'
@@ -147,7 +148,11 @@ export default React.memo(styled(Call)`
     word-wrap: unset;
   }
 
-  .ui--Extrinsic--toplevel {
+  .ui--Extrinsic--toplevel.noIndent {
+    margin-top: 0.25rem;
+  }
+
+  .ui--Extrinsic--toplevel:not(.noIndent) {
     margin-top: 0.75rem;
 
     .ui--Labelled {
diff --git a/packages/react-params/src/Param/Call.tsx b/packages/react-params/src/Param/Call.tsx
index 51a187986d..f4123d960b 100644
--- a/packages/react-params/src/Param/Call.tsx
+++ b/packages/react-params/src/Param/Call.tsx
@@ -8,10 +8,12 @@ import React from 'react';
 
 import { Call, Static } from '@polkadot/react-components';
 
+import { useTranslation } from '../translate';
 import Bare from './Bare';
 import Unknown from './Unknown';
 
 function CallDisplay (props: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { className = '', defaultValue: { value }, isDisabled, label, withLabel } = props;
 
   if (!isDisabled) {
@@ -32,7 +34,12 @@ function CallDisplay (props: Props): React.ReactElement<Props> {
       >
         {section}.{method}
       </Static>
-      <Call value={call} />
+      <Call
+        labelHash={t<string>('call hash / {{section}}.{{method}}', { replace: { method, section } })}
+        noIndent
+        value={call}
+        withHash
+      />
     </Bare>
   );
 }