Show encoded call data/hash on extrinsics (#5210)

* Show encoded call data/hash on extrinsics

* One-time method-only encoding

packages/page-extrinsics/src/Selection.tsx

@@ -3,11 +3,12 @@
 
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { Button, Extrinsic, InputAddress, MarkError, TxButton } from '@polkadot/react-components';
+import { Button, Extrinsic, InputAddress, MarkError, Output, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { BalanceFree } from '@polkadot/react-query';
+import { u8aToHex } from '@polkadot/util';
 
 import { useTranslation } from './translate';
 
@@ -28,6 +29,20 @@ function Selection (): React.ReactElement {
     []
   );
 
+  const [extrinsicHex, extrinsicHash] = useMemo(
+    (): [string, string] => {
+      if (!extrinsic) {
+        return ['0x', '0x'];
+      }
+
+      const u8a = extrinsic.method.toU8a();
+
+      // don't use the built-in hash, we only want to convert once
+      return [u8aToHex(u8a), extrinsic.registry.hash(u8a).toHex()];
+    },
+    [extrinsic]
+  );
+
   return (
     <div className='extrinsics--Selection'>
       <InputAddress
@@ -47,6 +62,19 @@ function Selection (): React.ReactElement {
         onChange={_onExtrinsicChange}
         onError={_onExtrinsicError}
       />
+      <Output
+        isDisabled
+        isTrimmed
+        label='encoded call data'
+        value={extrinsicHex}
+        withCopy
+      />
+      <Output
+        isDisabled
+        label='encoded call hash'
+        value={extrinsicHash}
+        withCopy
+      />
       {error && !extrinsic && (
         <MarkError content={error} />
       )}