use simplified item IDs

src/components/DataViewerValueParsed.tsx

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 import { DecodedArg } from "../model/decodedMetadata";
 import { noCase } from "../utils/string";
 
-import { AccountAddress } from "./AccountAddress";
+import { AccountAddress } from "./account/AccountAddress";
 import { Network } from "../model/network";
 
 // found in https://github.com/polkadot-js/apps/blob/59c2badf87c29fd8cb5b7dfcc045c3ce451a54bc/packages/react-params/src/Param/findComponent.ts#L51

src/components/AccountAddress.tsx → src/components/account/AccountAddress.tsx

@@ -3,13 +3,14 @@ import { useMemo } from "react";
 import { Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
-import { Network } from "../model/network";
-import { encodeAddress } from "../utils/address";
-import { shortenHash } from "../utils/shortenHash";
+import { Network } from "../../model/network";
+import { encodeAddress } from "../../utils/address";
+import { shortenHash } from "../../utils/shortenHash";
+
+import CopyToClipboardButton, { CopyToClipboardButtonProps } from "../CopyToClipboardButton";
+import { Link } from "../Link";
 
-import { Link } from "./Link";
 import { AccountAvatar } from "./AccountAvatar";
-import CopyToClipboardButton, { CopyToClipboardButtonProps } from "./CopyToClipboardButton";
 
 const accountAddressStyle = css`
 	display: flex;

src/components/account/AccountBalancesTable.tsx

@@ -15,11 +15,12 @@ import { UsdRates } from "../../model/usdRates";
 
 import { compareProps } from "../../utils/compare";
 
-import { AccountAddress } from "../AccountAddress";
 import { Currency } from "../Currency";
 import { ErrorMessage } from "../ErrorMessage";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 
+import { AccountAddress } from "./AccountAddress";
+
 const networkStyle = css`
 	display: flex;
 	align-items: center;

src/components/balances/BalancesTable.tsx

@@ -5,7 +5,8 @@ import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
 import { decodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+
 import { Currency } from "../Currency";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Link } from "../Link";

src/components/blocks/BlockInfoTable.tsx

@@ -3,7 +3,8 @@ import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 import { encodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";

src/components/blocks/BlockLink.tsx

@@ -0,0 +1,21 @@
+import { Network } from "../../model/network";
+import { simplifyBlockId } from "../../services/blocksService";
+
+import { Link } from "../Link";
+
+export interface BlockLinkProps {
+	network: Network;
+	id: string;
+}
+
+export const BlockLink = (props: BlockLinkProps) => {
+	const {network, id} = props;
+
+	const simplifiedId = simplifyBlockId(id);
+
+	return (
+		<Link to={`/${network.name}/block/${simplifiedId}`}>
+			{simplifiedId}
+		</Link>
+	);
+};

src/components/blocks/BlocksTable.tsx

@@ -2,11 +2,13 @@ import { Block } from "../../model/block";
 import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
-import { Link } from "../Link";
 import { Time } from "../Time";
 
+import { BlockLink } from "./BlockLink";
+
 export type BlocksTableProps = {
 	network: Network;
 	blocks: PaginatedResource<Block>,
@@ -40,17 +42,12 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			<BlocksTableAttribute
 				label="Height"
 				render={(block) =>
-					<Link to={`/${network.name}/block/${block.id}`}>
-						{block.height}
-					</Link>
+					<BlockLink network={network} id={block.id} />
 				}
 			/>
 			<BlocksTableAttribute
 				label="Spec version"
-				render={(block) =>
-					<>{block.specVersion}</>
-
-				}
+				render={(block) => block.specVersion}
 			/>
 			{showValidator &&
 				<BlocksTableAttribute

src/components/calls/CallInfoTable.tsx

@@ -9,14 +9,18 @@ import { Resource } from "../../model/resource";
 
 import { encodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../AccountAddress";
+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";
+
 export type CallInfoTableProps = {
 	network: Network;
 	call: Resource<Call>;
@@ -56,27 +60,21 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Block"
 				render={(data) =>
-					<Link to={`/${network.name}/block/${data.blockId}`}>
-						{data.blockHeight}
-					</Link>
+					<BlockLink network={network} id={data.blockId} />
 				}
 				copyToClipboard={(data) => data.blockId}
 			/>
 			<CallInfoTableAttribute
 				label="Extrinsic"
 				render={(data) =>
-					<Link to={`/${network.name}/extrinsic/${data.extrinsicId}`}>
-						{data.extrinsicId}
-					</Link>
+					<ExtrinsicLink network={network} id={data.extrinsicId} />
 				}
 				copyToClipboard={(data) => data.extrinsicId}
 			/>
 			<CallInfoTableAttribute
 				label="Parent call"
 				render={(data) => data.parentId &&
-					<Link to={`/${network.name}/call/${data.parentId}`}>
-						{data.parentId}
-					</Link>
+					<CallLink network={network} id={data.parentId} />
 				}
 				copyToClipboard={(data) => data.parentId}
 				hide={(data) => !data.parentId}

src/components/calls/CallLink.tsx

@@ -0,0 +1,21 @@
+import { Network } from "../../model/network";
+import { simplifyCallId } from "../../services/callsService";
+
+import { Link } from "../Link";
+
+export interface CallLinkProps {
+	network: Network;
+	id: string;
+}
+
+export const CallLink = (props: CallLinkProps) => {
+	const {network, id} = props;
+
+	const simplifiedId = simplifyCallId(id);
+
+	return (
+		<Link to={`/${network.name}/call/${simplifiedId}`}>
+			{simplifiedId}
+		</Link>
+	);
+};

src/components/calls/CallsTable.tsx

@@ -2,10 +2,13 @@ import { Call } from "../../model/call";
 import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
+
 import { ButtonLink } from "../ButtonLink";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
-import { Link } from "../Link";
+
+import { CallLink } from "./CallLink";
 
 export type CallsTableProps = {
 	network: Network;
@@ -33,9 +36,7 @@ export const CallsTable = (props: CallsTableProps) => {
 			<CallsTableAttribute
 				label="ID"
 				render={(call) =>
-					<Link to={`/${network.name}/call/${call.id}`}>
-						{call.id}
-					</Link>
+					<CallLink network={network} id={call.id} />
 				}
 			/>
 			<CallsTableAttribute
@@ -66,9 +67,7 @@ export const CallsTable = (props: CallsTableProps) => {
 			<CallsTableAttribute
 				label="Extrinsic"
 				render={(call) =>
-					<Link to={`/${network.name}/extrinsic/${call.extrinsicId}`}>
-						{call.extrinsicId}
-					</Link>
+					<ExtrinsicLink network={network} id={call.extrinsicId} />
 				}
 			/>
 		</ItemsTable>

src/components/events/EventInfoTable.tsx

@@ -2,10 +2,13 @@ import { Event } from "../../model/event";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
+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";
 
@@ -48,33 +51,21 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			<EventInfoTableAttribute
 				label="Block"
 				render={(data) =>
-					<Link
-						to={`/${network.name}/block/${data.blockId}`}
-					>
-						{data.blockHeight}
-					</Link>
+					<BlockLink network={network} id={data.blockId} />
 				}
 				copyToClipboard={(data) => data.blockHeight.toString()}
 			/>
 			<EventInfoTableAttribute
 				label="Extrinsic"
 				render={(data) => data.extrinsicId &&
-					<Link
-						to={`/${network.name}/extrinsic/${data.extrinsicId}`}
-					>
-						{data.extrinsicId}
-					</Link>
+					<ExtrinsicLink network={network} id={data.extrinsicId} />
 				}
 				copyToClipboard={(data) => data.extrinsicId}
 			/>
 			<EventInfoTableAttribute
 				label="Call"
 				render={(data) => data.callId &&
-					<Link
-						to={`/${network.name}/call/${data.callId}`}
-					>
-						{data.callId}
-					</Link>
+					<CallLink network={network} id={data.callId} />
 				}
 				copyToClipboard={(data) => data.callId}
 			/>

src/components/events/EventLink.tsx

@@ -0,0 +1,21 @@
+import { Network } from "../../model/network";
+import { simplifyEventId } from "../../services/eventsService";
+
+import { Link } from "../Link";
+
+export interface EventLinkProps {
+	network: Network;
+	id: string;
+}
+
+export const EventLink = (props: EventLinkProps) => {
+	const {network, id} = props;
+
+	const simplifiedId = simplifyEventId(id);
+
+	return (
+		<Link to={`/${network.name}/event/${simplifiedId}`}>
+			{simplifiedId}
+		</Link>
+	);
+};

src/components/events/EventsTable.tsx

@@ -5,10 +5,13 @@ import { Event } from "../../model/event";
 import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
+import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
+
 import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
-import { Link } from "../Link";
+
+import { EventLink } from "./EventLink";
 
 const parametersColCss = (showExtrinsic?: boolean) => css`
 	width: ${showExtrinsic ? "40%" : "60%"};
@@ -40,9 +43,7 @@ function EventsTable(props: EventsTableProps) {
 			<EventsItemsTableAttribute
 				label="ID"
 				render={(event) => (
-					<Link to={`/${network.name}/event/${event.id}`}>
-						{event.id}
-					</Link>
+					<EventLink network={network} id={event.id} />
 				)}
 			/>
 			<EventsItemsTableAttribute
@@ -61,9 +62,7 @@ function EventsTable(props: EventsTableProps) {
 				<EventsItemsTableAttribute
 					label="Extrinsic"
 					render={(event) => event.extrinsicId && (
-						<Link to={`/${network.name}/extrinsic/${event.extrinsicId}`}>
-							{event.extrinsicId}
-						</Link>
+						<ExtrinsicLink network={event.network} id={event.extrinsicId} />
 					)}
 				/>
 			)}

src/components/extrinsics/ExtrinsicInfoTable.tsx

@@ -10,11 +10,12 @@ import { Resource } from "../../model/resource";
 
 import { encodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+import { BlockLink } from "../blocks/BlockLink";
+
 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";
 
@@ -62,9 +63,7 @@ export const ExtrinsicInfoTable = (props: ExtrinsicInfoTableProps) => {
 			<ExtrinsicInfoTableAttribute
 				label="Block"
 				render={(data) =>
-					<Link to={`/${network.name}/block/${data.blockId}`}>
-						{data.blockHeight}
-					</Link>
+					<BlockLink network={network} id={data.blockId} />
 				}
 				copyToClipboard={(data) => data.blockHeight.toString()}
 			/>

src/components/extrinsics/ExtrinsicLink.tsx

@@ -0,0 +1,21 @@
+import { Network } from "../../model/network";
+import { simplifyExtrinsicId } from "../../services/extrinsicsService";
+
+import { Link } from "../Link";
+
+export interface ExtrinsicLinkProps {
+	network: Network;
+	id: string;
+}
+
+export const ExtrinsicLink = (props: ExtrinsicLinkProps) => {
+	const {network, id} = props;
+
+	const simplifiedId = simplifyExtrinsicId(id);
+
+	return (
+		<Link to={`/${network.name}/extrinsic/${simplifiedId}`}>
+			{simplifiedId}
+		</Link>
+	);
+};