Prettify hash displays (#8476)

* Prettify hash displays

* Adjust app ordering

packages/apps-routing/src/index.ts

@@ -54,18 +54,22 @@ export default function create (t: TFunction): Routes {
     teleport(t),
     staking(t),
     collator(t),
-    democracy(t),
+    // governance v2
     referenda(t),
-    council(t),
-    treasury(t),
-    bounties(t),
-    techcomm(t),
     membership(t),
     alliance(t),
     fellowship(t),
     ranked(t),
     preimages(t),
     whitelist(t),
+    // old v1 governance
+    democracy(t),
+    council(t),
+    techcomm(t),
+    // other governance-related
+    treasury(t),
+    bounties(t),
+    // others
     parachains(t),
     gilt(t),
     assets(t),

packages/page-preimages/src/Preimages/Hash.tsx

@@ -0,0 +1,45 @@
+// Copyright 2017-2022 @polkadot/app-preimages authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HexString } from '@polkadot/util/types';
+
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import { CopyButton } from '@polkadot/react-components';
+
+interface Props {
+  className?: string;
+  value: HexString;
+}
+
+function Hash ({ className, value }: Props): React.ReactElement<Props> {
+  const shortHash = useMemo(
+    () => `${value.slice(0, 10)}…${value.slice(-8)}`,
+    [value]
+  );
+
+  return (
+    <td className={className}>
+      <div className='shortHash'>{shortHash}</div>
+      <CopyButton value={value} />
+    </td>
+  );
+}
+
+export default React.memo(styled(Hash)`
+  white-space: nowrap;
+
+  > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .shortHash {
+    font: var(--font-mono);
+
+    + div {
+      margin-left: 0.5rem;
+    }
+  }
+`);

packages/page-preimages/src/Preimages/Preimage.tsx

@@ -10,6 +10,7 @@ import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import usePreimage from '../usePreimage';
+import Hash from './Hash';
 
 interface Props {
   className?: string;
@@ -22,9 +23,9 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
 
   return (
     <tr className={ className }>
-      <td>{value}</td>
+      <Hash value={value} />
       <td className='all'>
-        {info && info.proposal && (
+        {info?.proposal && (
           <CallExpander
             labelHash={t<string>('proposal')}
             value={info.proposal}
@@ -32,10 +33,10 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
         )}
       </td>
       <td className='number'>
-        {info && info.bytes && formatNumber(info.bytes.length)}
+        {info?.bytes && formatNumber(info.bytes.length)}
       </td>
       <td className='number'>
-        {info && info.status && info.status.type}
+        {info?.status?.type}
       </td>
       <td className='number'>
         {info && info.count !== 0 && formatNumber(info.count)}

packages/page-referenda/src/Referenda/RefOngoing.tsx

@@ -66,7 +66,7 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn
       prepareEnd
     },
     proposalHash,
-    shortHash: `${proposalHash.slice(0, 8)}…${proposalHash.slice(-6)}`,
+    shortHash: `${proposalHash.slice(0, 10)}…${proposalHash.slice(-8)}`,
     tallyTotal: ongoing.tally.ayes.add(ongoing.tally.nays)
   };
 }

packages/page-whitelist/src/Hashes/Call.tsx

@@ -0,0 +1,38 @@
+// Copyright 2017-2022 @polkadot/app-whitelist authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HexString } from '@polkadot/util/types';
+
+import React from 'react';
+
+import Hash from '@polkadot/app-preimages/Preimages/Hash';
+import usePreimage from '@polkadot/app-preimages/usePreimage';
+import { CallExpander } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+  className?: string;
+  value: HexString;
+}
+
+function Call ({ className, value }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const info = usePreimage(value);
+
+  return (
+    <tr className={ className }>
+      <Hash value={value} />
+      <td className='all'>
+        {info?.proposal && (
+          <CallExpander
+            labelHash={t<string>('call')}
+            value={info.proposal}
+          />
+        )}
+      </td>
+    </tr>
+  );
+}
+
+export default React.memo(Call);

packages/page-whitelist/src/Hashes/Hash.tsx

@@ -1,23 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-whitelist authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { HexString } from '@polkadot/util/types';
-
-import React from 'react';
-
-interface Props {
-  className?: string;
-  value: HexString;
-}
-
-function Hash ({ className, value }: Props): React.ReactElement<Props> {
-  return (
-    <tr className={ className }>
-      <td>
-        {value}
-      </td>
-    </tr>
-  );
-}
-
-export default React.memo(Hash);

packages/page-whitelist/src/Hashes/index.tsx

@@ -9,7 +9,7 @@ import { Table } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 import useHashes from '../useHashes';
-import Hash from './Hash';
+import Call from './Call';
 import Summary from './Summary';
 
 interface Props {
@@ -23,7 +23,8 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
   const hashes = useHashes();
 
   const headerRef = useRef([
-    [t('hashes'), 'start']
+    [t('calls'), 'start'],
+    [undefined, 'all']
   ]);
 
   return (
@@ -35,7 +36,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
         header={headerRef.current}
       >
         {hashes && hashes.map((h) => (
-          <Hash
+          <Call
             key={h}
             value={h}
           />