Enhance Preimage Page with Decodable Call Link (#11570)

* feat: add link and copy button for proposal decoding in PreimageCall component

* feat: add background color to StyledTr for improved table visibility

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

@@ -3,9 +3,9 @@
 
 import type { Preimage } from '@polkadot/react-hooks/types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { AddressMini, MarkError, MarkWarning } from '@polkadot/react-components';
+import { AddressMini, CopyButton, MarkError, MarkWarning, styled } from '@polkadot/react-components';
 import { ZERO_ACCOUNT } from '@polkadot/react-hooks/useWeight';
 import { CallExpander } from '@polkadot/react-params';
 import { Null } from '@polkadot/types-codec';
@@ -21,6 +21,14 @@ interface Props {
 function PreimageCall ({ className = '', value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
+  const link = useMemo(
+    () =>
+      value?.proposal
+        ? `#/extrinsics/decode/${value?.proposal?.toHex()}`
+        : null,
+    [value]
+  );
+
   return (
     <>
       <td className={`${className} all`}>
@@ -33,6 +41,16 @@ function PreimageCall ({ className = '', value }: Props): React.ReactElement<Pro
                   value={value.proposal}
                 />
               )}
+              {link && (
+                <StyledDiv>
+                  <a
+                    className='isDecoded'
+                    href={link}
+                    rel='noreferrer'
+                  >{link.slice(0, 30)}...</a>
+                  <CopyButton value={value.proposal?.toHex()} />
+                </StyledDiv>
+              )}
               {value.proposalError
                 ? <MarkError content={value.proposalError} />
                 : value.proposalWarning
@@ -68,4 +86,11 @@ function PreimageCall ({ className = '', value }: Props): React.ReactElement<Pro
   );
 }
 
+const StyledDiv = styled.div`
+  display: flex;
+  align-items: center;
+  margin: -0.4rem 0rem -0.4rem 1rem;
+  white-space: nowrap;
+`;
+
 export default React.memo(PreimageCall);

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

@@ -121,6 +121,8 @@ const BORDER_TOP = `${BASE_BORDER * 3}rem solid var(--bg-page)`;
 const BORDER_RADIUS = `${BASE_BORDER * 4}rem`;
 
 const StyledTr = styled.tr<{isFirstItem: boolean; isLastItem: boolean}>`
+  background: var(--bg-table);
+  
   .ui--Icon {
     border-width: 2px;
   }