add network info to items

src/components/NetworkBadge.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource @emotion/react */
+import { HTMLAttributes } from "react";
+import { css } from "@emotion/react";
+
+import { Network } from "../model/network";
+
+const networkStyle = css`
+	display: flex;
+	align-items: center;
+
+	white-space: nowrap;
+`;
+
+const networkIconStyle = css`
+	width: 20px;
+	height: 20px;
+	object-fit: contain;
+	margin-right: 12px;
+	flex: 0 0 auto;
+`;
+
+export interface NetworkBadgeProps extends HTMLAttributes<HTMLDivElement> {
+	network: Network;
+}
+
+export const NetworkBadge = (props: NetworkBadgeProps) => {
+	const {network, ...divProps} = props;
+
+	return (
+		<div {...divProps} css={networkStyle}>
+			<img src={network.icon} css={networkIconStyle} />
+			<div>{network.displayName}</div>
+		</div>
+	);
+};

src/components/ResultLayout.tsx

@@ -1,17 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import { Outlet, useLoaderData, useLocation } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { css, Theme } from "@emotion/react";
 
 import Background from "../assets/detail-page-bgr.svg";
 import { ReactComponent as Logo } from "../assets/calamar-logo-export-02.svg";
 
-import { Network } from "../model/network";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 
-import { NotFoundPage } from "../screens/notFound";
-
-import SearchInput from "./SearchInput";
-import { Link } from "./Link";
 import { Footer } from "./Footer";
+import { Link } from "./Link";
+import SearchInput from "./SearchInput";
 
 const containerStyle = (theme: Theme) => css`
 	--content-wrapper-min-height: 450px;
@@ -161,6 +159,10 @@ export const ResultLayout = () => {
 	const location = useLocation();
 	console.log("LOCATION", location.pathname, location.search);
 
+	const { network } = useNetworkLoaderData<false>();
+
+	console.log("network", network);
+
 	return (
 		<div css={containerStyle}>
 			<div css={backgroundStyle} data-test="background" />
@@ -173,7 +175,7 @@ export const ResultLayout = () => {
 							</Link>
 						</div>
 						<div css={topBarRowStyle}>
-							<SearchInput css={searchInputStyle} />
+							<SearchInput css={searchInputStyle} defaultNetworks={network && [network]} />
 						</div>
 					</div>
 				</div>

src/components/SearchInput.tsx

@@ -97,14 +97,15 @@ const buttonStyle = (theme: Theme) => css`
 
 export type SearchInputProps = FormHTMLAttributes<HTMLFormElement> & {
 	persist?: boolean;
+	defaultNetworks?: Network[];
 };
 
 function SearchInput(props: SearchInputProps) {
-	const { persist, ...restProps } = props;
+	const { persist, defaultNetworks, ...restProps } = props;
 
 	const [qs] = useSearchParams();
 
-	const [networks, setNetworks] = useState<Network[]>(getNetworks(qs.getAll("network") || []));
+	const [networks, setNetworks] = useState<Network[]>(defaultNetworks || getNetworks(qs.getAll("network") || []));
 	const [query, setQuery] = useState<string>(qs.get("query") || "");
 
 	const navigate = useNavigate();
@@ -143,8 +144,8 @@ function SearchInput(props: SearchInputProps) {
 
 	useEffect(() => {
 		setQuery(qs.get("query") || "");
-		setNetworks(getNetworks(qs.getAll("network") || []));
-	}, [qs]);
+		setNetworks(defaultNetworks || getNetworks(qs.getAll("network") || []));
+	}, [qs, defaultNetworks]);
 
 	useEffect(() => {
 		if (persist) {

src/components/account/AccountInfoTable.tsx

@@ -8,6 +8,7 @@ import { Resource } from "../../model/resource";
 import { encodeAddress } from "../../utils/address";
 
 import {InfoTable, InfoTableAttribute } from "../InfoTable";
+import { NetworkBadge } from "../NetworkBadge";
 
 export type AccountInfoTableProps = HTMLAttributes<HTMLDivElement> & {
 	network: Network;
@@ -28,6 +29,12 @@ export const AccountInfoTable = (props: AccountInfoTableProps) => {
 			error={account.error}
 			{...tableProps}
 		>
+			<AccountInfoTableAttribute
+				label="Network"
+				render={(data) =>
+					<NetworkBadge network={data.network} />
+				}
+			/>
 			<AccountInfoTableAttribute
 				label={`${network.displayName} address`}
 				render={(data) => encodeAddress(data.address, network.prefix)}

src/components/blocks/BlockInfoTable.tsx

@@ -6,6 +6,7 @@ import { encodeAddress } from "../../utils/address";
 import { AccountAddress } from "../AccountAddress";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { Link } from "../Link";
+import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
 export type BlockInfoTableProps = {
@@ -26,6 +27,12 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 			notFoundMessage="No block found"
 			error={block.error}
 		>
+			<BlockInfoTableAttribute
+				label="Network"
+				render={(data) =>
+					<NetworkBadge network={data.network} />
+				}
+			/>
 			<BlockInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>

src/components/calls/CallInfoTable.tsx

@@ -14,6 +14,7 @@ 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";
 
 export type CallInfoTableProps = {
@@ -34,6 +35,12 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			notFoundMessage="No call found"
 			error={call.error}
 		>
+			<CallInfoTableAttribute
+				label="Network"
+				render={(data) =>
+					<NetworkBadge network={data.network} />
+				}
+			/>
 			<CallInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>

src/components/events/EventInfoTable.tsx

@@ -6,6 +6,7 @@ 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";
 
 export type EventInfoTableProps = {
@@ -26,6 +27,12 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			notFoundMessage="No event found"
 			error={event.error}
 		>
+			<EventInfoTableAttribute
+				label="Network"
+				render={(data) =>
+					<NetworkBadge network={data.network} />
+				}
+			/>
 			<EventInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>

src/components/extrinsics/ExtrinsicInfoTable.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { Chip } from "@mui/material";
 
 import CrossIcon from "../../assets/cross-icon.png";
@@ -14,6 +15,7 @@ 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";
 
 export type ExtrinsicInfoTableProps = {
@@ -34,6 +36,12 @@ export const ExtrinsicInfoTable = (props: ExtrinsicInfoTableProps) => {
 			notFoundMessage="No extrinsic found"
 			error={extrinsic.error}
 		>
+			<ExtrinsicInfoTableAttribute
+				label="Network"
+				render={(data) =>
+					<NetworkBadge network={data.network} />
+				}
+			/>
 			<ExtrinsicInfoTableAttribute
 				label="Timestamp"
 				render={(data) =>

src/components/search/SearchResultsTable.tsx

@@ -4,12 +4,12 @@ import { Alert } from "@mui/material";
 import { css } from "@emotion/react";
 
 import { Network } from "../../model/network";
-import { ItemsResponse } from "../../model/itemsResponse";
+import { SearchResultItem } from "../../model/searchResultItem";
 import { formatNumber } from "../../utils/number";
 
 import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps, ItemsTableProps } from "../ItemsTable";
 import { Link } from "../Link";
-import { SearchResultItem } from "../../model/searchResultItem";
+import { NetworkBadge } from "../NetworkBadge";
 
 const tableStyle = css`
 `;
@@ -19,19 +19,7 @@ const networkColumnStyle = css`
 `;
 
 const networkStyle = css`
-	display: flex;
-	align-items: center;
 	margin-right: 80px;
-
-	white-space: nowrap;
-`;
-
-const networkIconStyle = css`
-	width: 20px;
-	height: 20px;
-	object-fit: contain;
-	margin-right: 16px;
-	flex: 0 0 auto;
 `;
 
 type SearchResultsTableChild<T> = ReactElement<ItemsTableAttributeProps<T, [Network], []>>;
@@ -114,10 +102,7 @@ export const SearchResultsTable = <T extends {id: string, network: Network}>(pro
 				label="Network"
 				colCss={networkColumnStyle}
 				render={(item) => (
-					<div css={networkStyle}>
-						<img src={item.network.icon} css={networkIconStyle} />
-						<div>{item.network.displayName}</div>
-					</div>
+					<NetworkBadge network={item.network} css={networkStyle} />
 				)}
 			/>
 			{itemAttributes}

src/hooks/useNetworkLoaderData.ts

@@ -0,0 +1,7 @@
+import { useRouteLoaderData } from "react-router";
+
+import { NetworkLoaderData } from "../model/rootLoaderData";
+
+export function useNetworkLoaderData<DataEnsured extends boolean = true>() {
+	return (useRouteLoaderData("network") || {}) as DataEnsured extends false ? Partial<NetworkLoaderData> : NetworkLoaderData;
+}

src/screens/account.tsx

@@ -21,7 +21,7 @@ import { useCalls } from "../hooks/useCalls";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useExtrinsics } from "../hooks/useExtrinsics";
 import { usePage } from "../hooks/usePage";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useTab } from "../hooks/useTab";
 import { useTransfers } from "../hooks/useTransfers";
 import { useUsdRates } from "../hooks/useUsdRates";

src/screens/block.tsx

@@ -13,7 +13,7 @@ import { useCalls } from "../hooks/useCalls";
 import { useEvents } from "../hooks/useEvents";
 import { useExtrinsics } from "../hooks/useExtrinsics";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { usePage } from "../hooks/usePage";
 import { useTab } from "../hooks/useTab";
 

src/screens/call.tsx

@@ -10,7 +10,7 @@ import { useCall } from "../hooks/useCall";
 import { useEvents } from "../hooks/useEvents";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { usePage } from "../hooks/usePage";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useTab } from "../hooks/useTab";
 
 export type CallPageParams = {

src/screens/event.tsx

@@ -5,7 +5,7 @@ import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import { EventInfoTable } from "../components/events/EventInfoTable";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useEvent } from "../hooks/useEvent";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 
 export type EventPageParams = {
 	id: string;

src/screens/extrinsic.tsx

@@ -13,7 +13,7 @@ import { useEvents } from "../hooks/useEvents";
 import { useExtrinsic } from "../hooks/useExtrinsic";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { usePage } from "../hooks/usePage";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useTab } from "../hooks/useTab";
 
 type ExtrinsicPageParams = {

src/screens/network.tsx

@@ -15,7 +15,7 @@ import { useBlocks } from "../hooks/useBlocks";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useExtrinsicsWithoutTotalCount } from "../hooks/useExtrinsicsWithoutTotalCount";
 import { usePage } from "../hooks/usePage";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useStats } from "../hooks/useStats";
 import { useTab } from "../hooks/useTab";
 import { useTransfers } from "../hooks/useTransfers";

src/screens/runtime.tsx

@@ -4,7 +4,7 @@ import { MenuItem, Select } from "@mui/material";
 import { Card, CardHeader } from "../components/Card";
 import { Devtool } from "../components/Devtool";
 import { useRuntimeSpecVersions } from "../hooks/useRuntimeSpecVersions";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useRuntimeMetadataPallets } from "../hooks/useRuntimeMetadataPallets";
 import { tryParseInt } from "../utils/string";