Display link in encoded details (#7511)

* Display link in ecnoded details

* trigger

.123trigger

@@ -1,4 +1,4 @@
-27
+28
 
 0.45.2
 

packages/page-extrinsics/src/Decoded.tsx

@@ -3,6 +3,7 @@
 
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { Inspect } from '@polkadot/types/types';
+import type { HexString } from '@polkadot/util/types';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -19,7 +20,7 @@ interface Props {
   withHash?: boolean;
 }
 
-function extract (extrinsic?: SubmittableExtrinsic<'promise'> | null): [string, string, Inspect | null] {
+function extract (extrinsic?: SubmittableExtrinsic<'promise'> | null): [HexString, HexString, Inspect | null] {
   if (!extrinsic) {
     return ['0x', '0x', null];
   }
@@ -74,6 +75,7 @@ function Decoded ({ className, extrinsic, withData = true, withHash = true }: Pr
       </Columar.Column>
       <Columar.Column>
         <DecodedInspect
+          hex={hex}
           inspect={inspect}
           label={t<string>('encoded call details')}
         />

packages/react-api/src/Api.tsx

@@ -98,6 +98,14 @@ async function getInjectedAccounts (injectedPromise: Promise<InjectedExtension[]
   }
 }
 
+function createLink (baseApiUrl: string, isElectron: boolean): (path: string) => string {
+  return (path: string, apiUrl?: string): string =>
+    `${isElectron
+      ? 'https://polkadot.js.org/apps/'
+      : `${window.location.origin}${window.location.pathname}`
+    }?rpc=${encodeURIComponent(apiUrl || baseApiUrl)}#${path}`;
+}
+
 async function retrieve (api: ApiPromise, injectedPromise: Promise<InjectedExtension[]>): Promise<ChainData> {
   const [systemChain, systemChainType, systemName, systemVersion, injectedAccounts] = await Promise.all([
     api.rpc.system.chain(),
@@ -244,7 +252,7 @@ function Api ({ apiUrl, children, isElectron, store }: Props): React.ReactElemen
   );
   const apiRelay = useApiUrl(relayUrls);
   const value = useMemo<ApiProps>(
-    () => objectSpread({}, state, { api, apiEndpoint, apiError, apiRelay, apiUrl, extensions, isApiConnected, isApiInitialized, isElectron, isWaitingInjected: !extensions }),
+    () => objectSpread({}, state, { api, apiEndpoint, apiError, apiRelay, apiUrl, createLink: createLink(apiUrl, isElectron), extensions, isApiConnected, isApiInitialized, isElectron, isWaitingInjected: !extensions }),
     [apiError, extensions, isApiConnected, isApiInitialized, isElectron, state, apiEndpoint, apiRelay, apiUrl]
   );
 

packages/react-api/src/types.ts

@@ -36,6 +36,7 @@ export interface ApiProps extends ApiState {
   apiError: string | null;
   apiRelay: ApiPromise | null;
   apiUrl?: string;
+  createLink: (path: string, apiUrl?: string) => string;
   extensions?: InjectedExtension[];
   isApiConnected: boolean;
   isApiInitialized: boolean;

packages/react-components/src/Inspect.tsx

@@ -7,10 +7,14 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Output } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { u8aToHex } from '@polkadot/util';
 
+import { useTranslation } from './translate';
+
 interface Props {
   className?: string;
+  hex?: string | null;
   inspect?: Inspect | null;
   label: React.ReactNode;
 }
@@ -38,11 +42,25 @@ function formatInspect ({ inner = [], name = '', outer = [] }: Inspect, result:
   return result;
 }
 
-function DecodedInspect ({ className, inspect, label }: Props): React.ReactElement<Props> | null {
+function DecodedInspect ({ className, hex, inspect, label }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { createLink } = useApi();
   const formatted = useMemo(
     () => inspect && formatInspect(inspect),
     [inspect]
   );
+  const [link, path] = useMemo(
+    (): [null | string, null | string] => {
+      if (hex) {
+        const path = `/extrinsics/decode/${hex}`;
+
+        return [createLink(path), `#${path}`];
+      }
+
+      return [null, null];
+    },
+    [createLink, hex]
+  );
 
   if (!formatted) {
     return null;
@@ -62,6 +80,21 @@ function DecodedInspect ({ className, inspect, label }: Props): React.ReactEleme
               <td>{value}</td>
             </tr>
           ))}
+          {link && (
+            <tr
+              className='isLink'
+              key='hex'
+            >
+              <td>{t<string>('link')}</td>
+              <td>
+                <a
+                  href={link}
+                  rel='noreferrer'
+                  target='_blank'
+                >{path}</a>
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
     </Output>
@@ -69,18 +102,43 @@ function DecodedInspect ({ className, inspect, label }: Props): React.ReactEleme
 }
 
 export default React.memo(styled(DecodedInspect)`
-  table tr td {
-    vertical-align: top;
+  table {
+    width: 100%;
 
-    &:first-child {
-      color: var(--color-label);
-      padding-right: 0.5em;
-      text-align: right;
-      white-space: nowrap;
-    }
+    tbody {
+      width: 100%;
 
-    &:last-child {
-      font: var(--font-mono);
+      tr {
+        width: 100%;
+
+        td {
+          vertical-align: top;
+        }
+
+        td:first-child {
+          color: var(--color-label);
+          padding-right: 0.5em;
+          text-align: right;
+          white-space: nowrap;
+        }
+
+        &:not(.isLink) td:last-child {
+          font: var(--font-mono);
+        }
+
+        &.isLink td {
+          &:last-child {
+            max-width: 0;
+          }
+
+          a {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
     }
   }
 `);