Metadata docs

src/components/Card.tsx

@@ -39,7 +39,7 @@ const cardHeaderStyle = css`
 
 	[data-class=copy-button] {
 		vertical-align: text-bottom;
-		margin: 6px 0;
+		margin: 2px 0;
 		margin-left: 16px;
 	}
 `;

src/components/CopyToClipboardButton.tsx

@@ -4,7 +4,6 @@ import { IconButton, IconButtonProps, Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
 const buttonStyle = css`
-	padding: 0;
 `;
 
 export type CopyToClipboardButtonProps = Omit<IconButtonProps, "value"|"size"> & {

src/components/DataViewer.tsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react";
 import { css, Theme } from "@emotion/react";
-import { IconButton, Modal, ToggleButton, ToggleButtonGroup } from "@mui/material";
-import { Close } from "@mui/icons-material";
+import { IconButton, Modal, ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
+import { AutoStories, Close } from "@mui/icons-material";
 
 import { Network } from "../model/network";
 import { RuntimeMetadataArg } from "../model/runtime-metadata/runtimeMetadataArg";
@@ -91,6 +91,7 @@ const simpleControlsStyle = css`
 	align-items: flex-start;
 	margin-bottom: 0;
 	margin-left: 12px;
+	padding-top: 2px;
 `;
 
 const modeButtonsStyle = css`
@@ -104,21 +105,20 @@ const modeButtonStyle = css`
 	line-height: 24px;
 `;
 
-const fullscreenButtonStyle = css`
-	padding: 2px;
-	margin-left: 8px;
-`;
+const buttonStyle = css`
+	margin: -4px 0;
+	margin-left: 4px;
 
-const copyButtonStyle = css`
-	padding: 2px;
+	&:last-child {
+		margin-right: -2px;
+	}
 `;
 
 const closeButtonStyle = css`
 	position: absolute;
 	top: 0;
 	right: 0;
-	margin: 12px;
-	padding: 0;
+	margin: 8px;
 
 	z-index: 10;
 `;
@@ -169,7 +169,7 @@ const DataViewerModalHandle = (props: DataViewerModalHandleProps) => {
 
 	return (
 		<>
-			<IconButton css={fullscreenButtonStyle} onClick={() => setShowModal(true)}>
+			<IconButton css={buttonStyle} onClick={() => setShowModal(true)}>
 				<svg
 					height="20"
 					viewBox="0 0 20 20"
@@ -254,13 +254,13 @@ export const DataViewer = (props: DataViewerProps) => {
 		>
 			<div css={[controlsStyle, simple && simpleControlsStyle]}>
 				{!simple && <ModeSelect modes={MODES} value={mode} onChange={setMode} />}
-				{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={copyButtonStyle} />}
+				{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={buttonStyle} />}
 				{!simple &&
 					<DataViewerModalHandle>
 						<div css={dataViewerStyle}>
 							<div css={[controlsStyle]}>
 								<ModeSelect modes={MODES} value={mode} onChange={setMode} />
-								{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={copyButtonStyle} />}
+								{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={buttonStyle} />}
 							</div>
 							<div css={scrollAreaStyle}>
 								{mode === "json" && jsonContent}

src/components/InfoTable.tsx

@@ -75,7 +75,8 @@ const valueStyle = css`
 `;
 
 const copyButtonStyle = css`
-	margin-left: 16px;
+	margin: -4px 0;
+	margin-left: 12px;
 `;
 
 type InfoTableDataFn<T, A extends any[], R> = (data: T, ...additionalData: A) => R;

src/components/blocks/BlockInfoTable.tsx

@@ -84,7 +84,11 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 			/>
 			<BlockInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 

src/components/blocks/BlocksTable.tsx

@@ -5,6 +5,7 @@ import { PaginatedResource } from "../../model/paginatedResource";
 import { AccountAddress } from "../account/AccountAddress";
 
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
+import { Link } from "../Link";
 import { Time } from "../Time";
 
 import { BlockLink } from "./BlockLink";
@@ -47,7 +48,11 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			/>
 			<BlocksTableAttribute
 				label="Spec version"
-				render={(block) => block.specVersion}
+				render={(block) =>
+					<Link to={`/${block.network.name}/runtime/${block.specVersion}`}>
+						{block.specVersion}
+					</Link>
+				}
 			/>
 			{showValidator &&
 				<BlocksTableAttribute

src/components/calls/CallInfoTable.tsx

@@ -13,13 +13,15 @@ import { AccountAddress } from "../account/AccountAddress";
 import { BlockLink } from "../blocks/BlockLink";
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
+import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
 import { CallLink } from "./CallLink";
+import { CallNameButton } from "./CallNameButton";
+import { CallRuntimeMetadataButton } from "./CallRuntimeMetadataButton";
 
 export type CallInfoTableProps = {
 	network: Network;
@@ -105,13 +107,10 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Name"
 				render={(data) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${data.palletName}.${data.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{data.palletName}.{data.callName}
-					</ButtonLink>
+					<>
+						<CallNameButton call={data} />
+						{data.metadata.call && <CallRuntimeMetadataButton call={data} />}
+					</>
 				}
 			/>
 			<CallInfoTableAttribute
@@ -127,7 +126,11 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			/>
 			<CallInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 	);

src/components/calls/CallNameButton.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+import { Call } from "../../model/call";
+
+import { ButtonLink } from "../ButtonLink";
+
+const buttonStyle = css`
+	margin: -4px 0;
+`;
+
+export interface CallNameButtonProps {
+	call: Call;
+}
+
+export const CallNameButton = (props: CallNameButtonProps) => {
+	const {call} = props;
+
+	return (
+		<ButtonLink
+			to={`/search/extrinsics?query=${call.palletName}.${call.callName}&network=${call.network.name}`}
+			size="small"
+			color="secondary"
+			css={buttonStyle}
+		>
+			{call.palletName}.{call.callName}
+		</ButtonLink>
+	);
+};

src/components/calls/CallRuntimeMetadataButton.tsx

@@ -0,0 +1,23 @@
+import { Call } from "../../model/call";
+
+import { RuntimeMetadataButton } from "../runtime/RuntimeMetadataButton";
+
+export interface CallRuntimeMetadataButtonProps {
+	call: Call;
+}
+
+export const CallRuntimeMetadataButton = (props: CallRuntimeMetadataButtonProps) => {
+	const {call} = props;
+
+	if (!call.metadata.call) {
+		return null;
+	}
+
+	return (
+		<RuntimeMetadataButton
+			title={`${call.palletName}.${call.callName}`}
+			description={call.metadata.call.description}
+			link={`/${call.network.name}/runtime/${call.specVersion}/${call.palletName}/calls/${call.callName}`}
+		/>
+	);
+};

src/components/calls/CallsTable.tsx

@@ -9,6 +9,7 @@ import { ButtonLink } from "../ButtonLink";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 
 import { CallLink } from "./CallLink";
+import { CallNameButton } from "./CallNameButton";
 
 export type CallsTableProps = {
 	network: Network;
@@ -41,15 +42,7 @@ export const CallsTable = (props: CallsTableProps) => {
 			/>
 			<CallsTableAttribute
 				label="Name"
-				render={(call) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${call.palletName}.${call.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{call.palletName}.{call.callName}
-					</ButtonLink>
-				}
+				render={(call) => <CallNameButton call={call} />}
 			/>
 			{showAccount && (
 				<CallsTableAttribute

src/components/events/EventInfoTable.tsx

@@ -6,12 +6,15 @@ import { BlockLink } from "../blocks/BlockLink";
 import { CallLink } from "../calls/CallLink";
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
+import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
+import { EventNameButton } from "./EventNameButton";
+import { EventRuntimeMetadataButton } from "./EventRuntimeMetadataButton";
+
 export type EventInfoTableProps = {
 	network: Network;
 	event: Resource<Event>;
@@ -72,13 +75,10 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			<EventInfoTableAttribute
 				label="Name"
 				render={(data) =>
-					<ButtonLink
-						to={`/search/events?query=${data.palletName}.${data.eventName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{data.palletName}.{data.eventName}
-					</ButtonLink>
+					<>
+						<EventNameButton event={data} />
+						{data.metadata.event && <EventRuntimeMetadataButton event={data} />}
+					</>
 				}
 			/>
 			<EventInfoTableAttribute
@@ -95,7 +95,11 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			/>
 			<EventInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 	);

src/components/events/EventNameButton.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+import { Event } from "../../model/event";
+
+import { ButtonLink } from "../ButtonLink";
+
+const buttonStyle = css`
+	margin: -4px 0;
+`;
+
+export interface EventNameButtonProps {
+	event: Event;
+}
+
+export const EventNameButton = (props: EventNameButtonProps) => {
+	const {event} = props;
+
+	return (
+		<ButtonLink
+			to={`/search/events?query=${event.palletName}.${event.eventName}&network=${event.network.name}`}
+			size="small"
+			color="secondary"
+			css={buttonStyle}
+		>
+			{event.palletName}.{event.eventName}
+		</ButtonLink>
+	);
+};

src/components/events/EventRuntimeMetadataButton.tsx

@@ -0,0 +1,23 @@
+import { Event } from "../../model/event";
+
+import { RuntimeMetadataButton } from "../runtime/RuntimeMetadataButton";
+
+export interface EventRuntimeMetadataButtonProps {
+	event: Event;
+}
+
+export const EventRuntimeMetadataButton = (props: EventRuntimeMetadataButtonProps) => {
+	const {event} = props;
+
+	if (!event.metadata.event) {
+		return null;
+	}
+
+	return (
+		<RuntimeMetadataButton
+			title={`${event.palletName}.${event.eventName}`}
+			description={event.metadata.event.description}
+			link={`/${event.network.name}/runtime/${event.specVersion}/${event.palletName}/events/${event.eventName}`}
+		/>
+	);
+};

src/components/events/EventsTable.tsx

@@ -12,6 +12,7 @@ import { DataViewer } from "../DataViewer";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 
 import { EventLink } from "./EventLink";
+import { EventNameButton } from "./EventNameButton";
 
 const parametersColCss = (showExtrinsic?: boolean) => css`
 	width: ${showExtrinsic ? "40%" : "60%"};
@@ -48,15 +49,7 @@ function EventsTable(props: EventsTableProps) {
 			/>
 			<EventsItemsTableAttribute
 				label="Name"
-				render={(event) =>
-					<ButtonLink
-						to={`/search/events?query=${event.palletName}.${event.eventName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{event.palletName}.{event.eventName}
-					</ButtonLink>
-				}
+				render={(event) => <EventNameButton event={event} />}
 			/>
 			{showExtrinsic && (
 				<EventsItemsTableAttribute