From 29b34a076acfdcf8305b5cae4e30e837eae398bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Thu, 19 Oct 2023 22:54:45 +0200
Subject: [PATCH 01/21] universal search

---
 .../update-networks/sources/runtime-spec.ts   |  26 +-
 src/components/NetworkSelect.tsx              |  22 +-
 src/components/ResultLayout.tsx               |  11 +-
 src/components/SearchInput.tsx                |   2 +-
 src/components/TabbedContent.tsx              |   8 +-
 src/components/blocks/BlocksTable.tsx         |  24 +-
 src/components/search/SearchResultsTable.tsx  | 163 +++++++++
 src/hooks/useNetworks.ts                      |   4 +-
 src/hooks/useRootLoaderData.ts                |   6 +-
 src/hooks/useSearch.ts                        |  13 +
 src/index.tsx                                 |   1 -
 src/model/root-loader-data.ts                 |   2 +-
 src/networks.json                             |  21 --
 src/react-app-env.d.ts                        |   6 +
 src/router.tsx                                | 128 +++----
 src/screens/account.tsx                       |   4 +-
 src/screens/block.tsx                         |   4 +-
 src/screens/call.tsx                          |   4 +-
 src/screens/error.tsx                         |  28 ++
 src/screens/event.tsx                         |   4 +-
 src/screens/extrinsic.tsx                     |   4 +-
 src/screens/network.tsx                       |   4 +-
 src/screens/runtime.tsx                       |   5 +-
 src/screens/search.tsx                        | 294 ++++++++++++----
 src/services/accountService.ts                |   1 -
 src/services/balancesService.ts               |   6 +-
 src/services/blocksService.ts                 |   2 +-
 src/services/callsService.ts                  |  48 ++-
 src/services/eventsService.ts                 |  54 ++-
 src/services/extrinsicsService.ts             |  43 +--
 src/services/networksService.ts               |   8 +-
 src/services/searchService.ts                 | 315 ++++++++++++++++++
 src/services/statsService.ts                  |   2 +-
 src/services/transfersService.ts              |   2 +-
 src/utils/assert.ts                           |   6 +-
 src/utils/extractConnectionItems.ts           |  14 +-
 src/utils/string.ts                           |   2 +-
 src/workers/runtimeSpecWorker.runtime.ts      |  12 +-
 38 files changed, 1002 insertions(+), 301 deletions(-)
 create mode 100644 src/components/search/SearchResultsTable.tsx
 create mode 100644 src/hooks/useSearch.ts
 create mode 100644 src/screens/error.tsx
 create mode 100644 src/services/searchService.ts

diff --git a/scripts/update-networks/sources/runtime-spec.ts b/scripts/update-networks/sources/runtime-spec.ts
index e0a21bb0..8f958811 100644
--- a/scripts/update-networks/sources/runtime-spec.ts
+++ b/scripts/update-networks/sources/runtime-spec.ts
@@ -1,6 +1,7 @@
 import { Metadata, TypeRegistry } from "@polkadot/types";
 
-import { getRuntimeSpec } from "../../../src/services/runtimeSpecService";
+import { getLatestRuntimeSpecVersion } from "../../../src/services/runtimeSpecService";
+import { fetchArchive } from "../../../src/services/fetchService";
 
 import { Network, SourceData, SourceType } from "../model";
 import { log } from "../utils/log";
@@ -12,10 +13,29 @@ export async function getRuntimeSpecData(network: Network): Promise<SourceData>
 	};
 
 	try {
-		const runtimeSpec = await getRuntimeSpec(network.name, "latest");
+		const latestRuntimeSpecVersion = await getLatestRuntimeSpecVersion(network.name);
+
+		const response = await fetchArchive<{metadata: {hex: `0x${string}`}[]}>(
+			network.name, `
+				query ($specVersion: Int!) {
+					metadata(where: {specVersion_eq: $specVersion}, orderBy: specVersion_DESC) {
+						hex
+					}
+				}
+			`,
+			{
+				specVersion: latestRuntimeSpecVersion
+			}
+		);
+
+		const metadataHex = response.metadata[0]?.hex;
+
+		if (!metadataHex) {
+			throw new Error("Not found");
+		}
 
 		const registry = new TypeRegistry();
-		const metadata = new Metadata(registry, runtimeSpec.hex);
+		const metadata = new Metadata(registry, metadataHex);
 		registry.setMetadata(metadata);
 
 		const latestMetadata = metadata.asLatest;
diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
index 15411c67..1dac9a4b 100644
--- a/src/components/NetworkSelect.tsx
+++ b/src/components/NetworkSelect.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useCallback, useEffect } from "react";
 import { Divider, ListItemIcon, ListItemText, ListSubheader, MenuItem, Select, SelectProps } from "@mui/material";
+import { BlurOn as AllIcon } from "@mui/icons-material";
 import { css } from "@emotion/react";
 
 import { useNetworks } from "../hooks/useNetworks";
@@ -34,24 +35,20 @@ const iconStyle = css`
 `;
 
 type NetworkSelectProps = Omit<SelectProps, "value" | "onChange"> & {
-	value?: string;
-	onChange?: (value: string, isUserAction: boolean) => void;
+	value: string | undefined;
+	onChange: (value: string, isUserAction: boolean) => void;
 };
 
 const NetworkSelect = (props: NetworkSelectProps) => {
 	const { value, onChange, ...selectProps } = props;
 
-	const networks = useNetworks();
-
 	const networkGroups = useNetworkGroups();
 
 	useEffect(() => {
-		const network = networks.find((it) => it.name === value);
-
-		if (!network && onChange && networks.length > 0) {
-			onChange(networkGroups[0]!.networks[0]!.name, false);
+		if (!value) {
+			onChange("*", false);
 		}
-	}, [value, onChange, networkGroups]);
+	}, [value, onChange]);
 
 	const handleNetworkChange = useCallback(
 		(e: any) => {
@@ -67,6 +64,13 @@ const NetworkSelect = (props: NetworkSelectProps) => {
 			value={value || ""}
 			css={selectStyle}
 		>
+			<MenuItem value="*">
+				<ListItemIcon>
+					<AllIcon css={{color: "#e6007a"}} />
+				</ListItemIcon>
+				<ListItemText>All networks</ListItemText>
+			</MenuItem>
+			<Divider />
 			{networkGroups.map((group, index) => [
 				index > 0 && <Divider />,
 				<ListSubheader key={index}>
diff --git a/src/components/ResultLayout.tsx b/src/components/ResultLayout.tsx
index 0067414a..6e3d4d30 100644
--- a/src/components/ResultLayout.tsx
+++ b/src/components/ResultLayout.tsx
@@ -157,13 +157,7 @@ const footerStyle = css`
 	}
 `;
 
-export type ResultLayoutLoaderData = {
-	network?: Network;
-};
-
 export const ResultLayout = () => {
-	const {network} = useLoaderData() as ResultLayoutLoaderData;
-
 	return (
 		<div css={containerStyle}>
 			<div css={backgroundStyle} data-test="background" />
@@ -176,13 +170,12 @@ export const ResultLayout = () => {
 							</Link>
 						</div>
 						<div css={topBarRowStyle}>
-							<SearchInput css={searchInputStyle} defaultNetwork={network?.name} key={network?.name} />
+							<SearchInput css={searchInputStyle} />
 						</div>
 					</div>
 				</div>
 				<div css={contentStyle}>
-					{network && <Outlet />}
-					{!network && <NotFoundPage />}
+					<Outlet />
 				</div>
 			</div>
 			<Footer css={footerStyle} />
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 40a2ec51..7d35f4ff 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -129,7 +129,7 @@ function SearchInput(props: SearchInputProps) {
 
 			e.preventDefault();
 			localStorage.setItem("network", network);
-			navigate(`/${network}/search?query=${search}`);
+			navigate(`/search?query=${search}`);
 		},
 		[navigate, network, search]
 	);
diff --git a/src/components/TabbedContent.tsx b/src/components/TabbedContent.tsx
index 0d935437..b569b7f3 100644
--- a/src/components/TabbedContent.tsx
+++ b/src/components/TabbedContent.tsx
@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { Children, cloneElement, PropsWithChildren, ReactElement, ReactNode, useState } from "react";
-import { Theme, css } from "@emotion/react";
 import { CircularProgress, Tab, TabProps, Tabs } from "@mui/material";
 import ErrorIcon from "@mui/icons-material/Warning";
+import { Theme, css } from "@emotion/react";
+
+import { formatNumber } from "../utils/number";
 
 const tabsWrapperStyle = css`
 	margin-bottom: 16px;
@@ -94,7 +96,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 				label={
 					<>
 						<span>{label}</span>
-						{Number.isInteger(count) && <span data-test="count" css={tabCountStyle}>({count})</span>}
+						{count !== undefined && <span data-test="count" css={tabCountStyle}>({formatNumber(count)})</span>}
 						{(loading) && <CircularProgress css={tabLoadingStyle} size={14} />}
 						{!!error && <ErrorIcon css={tabErrorStyle} />}
 					</>
@@ -114,7 +116,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 				<Tabs
 					css={tabsStyle}
 					onChange={(_, tab) => setTab(tab)}
-					value={tab || tabHandles[0]!.props.value}
+					value={tab || tabHandles[0]?.props.value}
 					variant="scrollable"
 					scrollButtons={false}
 				>
diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
index b1ca1e52..0cbc0800 100644
--- a/src/components/blocks/BlocksTable.tsx
+++ b/src/components/blocks/BlocksTable.tsx
@@ -50,18 +50,18 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 				}
 			/>
 			{showValidator &&
-			<BlocksTableAttribute
-				label="Validator"
-				render={(block) =>
-					block.validator &&
-					<AccountAddress
-						network={network}
-						address={block.validator}
-						shorten
-						copyToClipboard="small"
-					/>
-				}
-			/>
+				<BlocksTableAttribute
+					label="Validator"
+					render={(block) =>
+						block.validator &&
+						<AccountAddress
+							network={network}
+							address={block.validator}
+							shorten
+							copyToClipboard="small"
+						/>
+					}
+				/>
 			}
 			{showTime &&
 				<BlocksTableAttribute
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
new file mode 100644
index 00000000..56fb8fb9
--- /dev/null
+++ b/src/components/search/SearchResultsTable.tsx
@@ -0,0 +1,163 @@
+/** @jsxImportSource @emotion/react */
+import { Children, ReactElement, ReactNode } from "react";
+import { css } from "@emotion/react";
+
+import { NetworkSearchResult } from "../../services/searchService";
+
+import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps } from "../ItemsTable";
+import { Link } from "../Link";
+import { Alert } from "@mui/material";
+import { formatNumber } from "../../utils/number";
+import { ButtonLink } from "../ButtonLink";
+import { Time } from "../Time";
+import { Network } from "../../model/network";
+import { Extrinsic } from "../../model/extrinsic";
+import { ItemsResponse } from "../../model/itemsResponse";
+import React from "react";
+
+const tableStyle = css`
+	table {
+		table-layout: auto;
+	}
+`;
+
+const networkColumnStyle = css`
+	width: 0px;
+`;
+
+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;
+	float: left;
+`;
+
+type SearchResultsTableChild<T> = ReactElement<ItemsTableAttributeProps<T, [Network], []>>;
+
+interface SearchResultsTableProps<T> {
+	children: SearchResultsTableChild<T>|(SearchResultsTableChild<T>|false|undefined|null)[];
+	query: string;
+	results: NetworkSearchResult[];
+	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
+	itemsPlural: string
+}
+
+export const SearchResultsTableAttribute = <T extends object>(props: ItemsTableAttributeProps<{item: T, result: NetworkSearchResult}, [Network], []>) => <ItemsTableAttribute {...props} />;
+export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;
+
+interface SearchResultsTableRow<T extends object> {
+	id: string;
+	item: T|undefined;
+	result: NetworkSearchResult;
+}
+
+export const SearchResultsTable = <T extends object>(props: SearchResultsTableProps<T>) => {
+	const { children, query, results, getItems, itemsPlural } = props;
+
+	const rows = results.flatMap<SearchResultsTableRow<T>>((result) => {
+		const items = getItems(result);
+
+		if (items.data.length === 0 && items.pagination.totalCount) {
+			return [{
+				id: `${result.network.name}-0`,
+				item: undefined,
+				result
+			}];
+		} else {
+			return items.data.map((it, index) => ({
+				id: `${result.network.name}-${index}`,
+				item: it,
+				result
+			}));
+		}
+	}) || [];
+
+	const itemAttributes = Children.map(children, (child, index) => {
+		if (!child) {
+			return null;
+		}
+
+		console.log("child", index, child.type === React.Fragment, child);
+
+		const {label, colCss, render} = child.props;
+
+		if (index === 0) {
+			return (
+				<SearchResultsTableAttribute<T>
+					label={label}
+					colCss={colCss}
+					colSpan={({item, result}) => (!item /* TODO || result.error*/) ? Children.count(children) : 1}
+					render={({item, result}) => {
+						const total = getItems(result).pagination.totalCount || 0;
+
+						return (
+							<>
+								{item && render(item, result.network)}
+								{!item && (
+									<Alert severity="warning" icon={false}>
+										{formatNumber(total)} {itemsPlural} found. {" "}
+										<Link to={`/search?query=${query}&network=${result.network.name}`}>
+											View
+										</Link>
+									</Alert>
+								)}
+								{/* TODO result.error &&
+									<ErrorMessage
+										message="Unexpected error occured while fetching data"
+										details={result.error.message}
+										data-test={`${result.network.name}-balance-error`}
+									/>
+								*/}
+							</>
+						);
+					}}
+				/>
+			);
+		}
+
+		return (
+			<SearchResultsTableAttribute<T>
+				label={label}
+				colCss={colCss}
+				render={({item, result}) => {
+					if (!item) {
+						return null;
+					}
+
+					return render(item, result.network);
+				}}
+				hide={({item, result}) => !item /* TODO || result.error*/}
+			/>
+		);
+	}) as any;
+
+	return (
+		<ItemsTable
+			//data={results.map(it => ({...it, id: it.network.name})).filter(it => (getItems(it).pagination.totalCount || 0) > 0)}
+			data={rows}
+			css={tableStyle}
+			data-test="search-results-table"
+		>
+			<SearchResultsTableAttribute
+				label="Network"
+				colCss={networkColumnStyle}
+				render={({result}) => (
+					<div css={networkStyle}>
+						<img src={result.network.icon} css={networkIconStyle} />
+						<div>{result.network.displayName}</div>
+					</div>
+				)}
+			/>
+			{itemAttributes}
+		</ItemsTable>
+	);
+};
diff --git a/src/hooks/useNetworks.ts b/src/hooks/useNetworks.ts
index 0407d5e9..48ae922e 100644
--- a/src/hooks/useNetworks.ts
+++ b/src/hooks/useNetworks.ts
@@ -1,5 +1,5 @@
 import { getNetworks } from "../services/networksService";
 
-export function useNetworks() {
-	return getNetworks();
+export function useNetworks(names?: string[]) {
+	return getNetworks(names);
 }
diff --git a/src/hooks/useRootLoaderData.ts b/src/hooks/useRootLoaderData.ts
index 56edf65c..07ed5e2e 100644
--- a/src/hooks/useRootLoaderData.ts
+++ b/src/hooks/useRootLoaderData.ts
@@ -1,7 +1,7 @@
 import { useRouteLoaderData } from "react-router";
 
-import { RootLoaderData } from "../model/root-loader-data";
+import { NetworkLoaderData } from "../model/root-loader-data";
 
-export function useRootLoaderData() {
-	return useRouteLoaderData("root") as RootLoaderData;
+export function useNetworkLoaderData() {
+	return useRouteLoaderData("network") as NetworkLoaderData;
 }
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
new file mode 100644
index 00000000..e6bf88f6
--- /dev/null
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,13 @@
+import { FetchOptions } from "../model/fetchOptions";
+import { Network } from "../model/network";
+import { search } from "../services/searchService";
+
+import { useResource } from "./useResource";
+
+export function useSearch(
+	query: string,
+	networks?: Network[],
+	options?: FetchOptions
+) {
+	return useResource(search, [query, networks], options);
+}
diff --git a/src/index.tsx b/src/index.tsx
index 6822dd58..abaa0f38 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,7 +8,6 @@ import "./echarts";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
-
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement
 );
diff --git a/src/model/root-loader-data.ts b/src/model/root-loader-data.ts
index d9b0df92..249f4b99 100644
--- a/src/model/root-loader-data.ts
+++ b/src/model/root-loader-data.ts
@@ -1,5 +1,5 @@
 import { Network } from "./network";
 
-export type RootLoaderData = {
+export type NetworkLoaderData = {
 	network: Network;
 }
diff --git a/src/networks.json b/src/networks.json
index 63c1773d..b40835c0 100644
--- a/src/networks.json
+++ b/src/networks.json
@@ -120,24 +120,6 @@
         },
         "coinGeckoId": "calamari-network"
     },
-    {
-        "name": "efinity",
-        "displayName": "Efinity",
-        "icon": "/assets/network-icons/efinity.svg",
-        "color": "#496ddb",
-        "website": "https://efinity.io/",
-        "parachainId": 2021,
-        "relayChain": "polkadot",
-        "prefix": 1110,
-        "decimals": 18,
-        "symbol": "EFI",
-        "squids": {
-            "archive": "https://efinity.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-efinity/graphql",
-            "main": "https://squid.subsquid.io/gs-main-efinity/graphql"
-        },
-        "coinGeckoId": "efinity"
-    },
     {
         "name": "equilibrium",
         "displayName": "Equilibrium",
@@ -156,7 +138,6 @@
         "name": "gmordie",
         "displayName": "GM",
         "icon": "/assets/network-icons/gmordie.png",
-        "color": "#f47b36",
         "website": "https://gmordie.com/",
         "parachainId": 2123,
         "relayChain": "kusama",
@@ -515,7 +496,6 @@
         "name": "statemine",
         "displayName": "Statemine",
         "icon": "/assets/network-icons/statemine.png",
-        "color": "#113911",
         "website": "https://www.parity.io/",
         "parachainId": 1000,
         "relayChain": "kusama",
@@ -533,7 +513,6 @@
         "name": "statemint",
         "displayName": "Statemint",
         "icon": "/assets/network-icons/statemint.png",
-        "color": "#86e62a",
         "website": "https://www.parity.io/",
         "parachainId": 1000,
         "relayChain": "polkadot",
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index fa112e70..c04e0260 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -16,6 +16,12 @@ declare module "@mui/material/styles" {
 	}
 }
 
+declare module "@mui/material/Alert" {
+	interface AlertPropsColorOverrides {
+		neutral: true;
+	}
+}
+
 declare module "@mui/material/Button" {
 	interface ButtonPropsColorOverrides {
 		neutral: true;
diff --git a/src/router.tsx b/src/router.tsx
index 280f3afc..88e20c40 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -7,10 +7,11 @@ import { encodeAddress } from "./utils/formatAddress";
 import { AccountPage } from "./screens/account";
 import { BlockPage } from "./screens/block";
 import { CallPage } from "./screens/call";
-import { NetworkPage } from "./screens/network";
+import { ErrorPage } from "./screens/error";
 import { EventPage } from "./screens/event";
 import { ExtrinsicPage } from "./screens/extrinsic";
 import { HomePage } from "./screens/home";
+import { NetworkPage } from "./screens/network";
 import { NotFoundPage } from "./screens/notFound";
 import { SearchPage } from "./screens/search";
 import { RuntimePage } from "./screens/runtime";
@@ -23,77 +24,86 @@ export const router = createBrowserRouter([
 		element: <HomePage />,
 	},
 	{
-		id: "root",
-		path: ":network",
-		loader: ({ params }) => {
-			const { network: networkName } = params;
-			const network = networkName ? getNetwork(networkName, false) : undefined;
-
-			return { network };
-		},
 		element: <ResultLayout />,
 		children: [
-			{
-				index: true,
-				element: <NetworkPage />,
-			},
-			{
-				path: "extrinsic/:id",
-				element: <ExtrinsicPage />,
-			},
 			{
 				path: "search",
 				element: <SearchPage />,
 			},
 			{
-				path: "block/:id",
-				element: <BlockPage />,
-			},
-			{
-				path: "call/:id",
-				element: <CallPage />,
-			},
-			{
-				path: "account/:address",
-				element: <AccountPage />,
+				id: "network",
+				path: ":network",
 				loader: ({ params }) => {
-					const { network: networkName, address } = params;
-					const network = networkName ? getNetwork(networkName, false) : undefined;
+					const { network: networkName } = params;
 
-					if (!network || !address) {
-						return null;
+					try {
+						const network = getNetwork(networkName as string);
+						return { network };
+					} catch (e) {
+						throw new Response("Network not found", {status: 404});
 					}
+				},
+				errorElement: <ErrorPage />,
+				children: [
+					{
+						index: true,
+						element: <NetworkPage />,
+					},
+					{
+						path: "extrinsic/:id",
+						element: <ExtrinsicPage />,
+					},
+					{
+						path: "block/:id",
+						element: <BlockPage />,
+					},
+					{
+						path: "call/:id",
+						element: <CallPage />,
+					},
+					{
+						path: "account/:address",
+						element: <AccountPage />,
+						loader: ({ params }) => {
+							const { network: networkName, address } = params;
+							const network = networkName ? getNetwork(networkName, false) : undefined;
 
-					const encodedAddress = encodeAddress(address, network.prefix);
-					if (address !== encodedAddress) {
-						return redirect(`/${network.name}/account/${encodedAddress}`);
-					}
+							if (!network || !address) {
+								return null;
+							}
 
-					return null;
-				}
-			},
-			{
-				path: "event/:id",
-				element: <EventPage />,
-			},
-			{
-				path: "latest-extrinsics",
-				element: <Navigate to=".." replace />,
-			},
-			{
-				path: "runtime",
-				element: config.devtools.enabled ? <RuntimePage /> : <NotFoundPage />,
-			},
-			{
-				path: "runtime/:specVersion",
-				element: config.devtools.enabled ? <RuntimePage /> : <NotFoundPage />,
-			},
-			{
-				path: "*",
-				element: <NotFoundPage />,
+							const encodedAddress = encodeAddress(address, network.prefix);
+							if (address !== encodedAddress) {
+								return redirect(`/${network.name}/account/${encodedAddress}`);
+							}
+
+							return null;
+						}
+					},
+					{
+						path: "event/:id",
+						element: <EventPage />,
+					},
+					{
+						path: "latest-extrinsics",
+						element: <Navigate to=".." replace />,
+					},
+					{
+						path: "runtime",
+						element: config.devtools.enabled ? <RuntimePage /> : <NotFoundPage />,
+					},
+					{
+						path: "runtime/:specVersion",
+						element: config.devtools.enabled ? <RuntimePage /> : <NotFoundPage />,
+					},
+					{
+						path: "*",
+						element: <NotFoundPage />,
+					},
+				],
 			},
-		],
-	},
+		]
+	}
 ], {
 	basename: window.location.hostname === "localhost"
 		? undefined
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index a8032468..883b6030 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -23,7 +23,7 @@ import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useExtrinsics } from "../hooks/useExtrinsics";
 import { useUsdRates } from "../hooks/useUsdRates";
 import { useTransfers } from "../hooks/useTransfers";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 import { hasSupport } from "../services/networksService";
 
@@ -81,7 +81,7 @@ export type AccountPageParams = {
 };
 
 export const AccountPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { address } = useParams() as AccountPageParams;
 
 	const account = useAccount(network.name, address);
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 3138e0cd..f2746280 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -13,14 +13,14 @@ import { useCalls } from "../hooks/useCalls";
 import { useEvents } from "../hooks/useEvents";
 import { useExtrinsics } from "../hooks/useExtrinsics";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 export type BlockPageParams = {
 	id: string;
 };
 
 export const BlockPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as BlockPageParams;
 
 	const block = useBlock(network.name, { id_eq: id });
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index cb0fafeb..f35c5f39 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -8,14 +8,14 @@ import { TabbedContent, TabPane } from "../components/TabbedContent";
 import { useCall } from "../hooks/useCall";
 import { useEvents } from "../hooks/useEvents";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 export type CallPageParams = {
 	id: string;
 };
 
 export const CallPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as CallPageParams;
 
 	const call = useCall(network.name, { id_eq: id });
diff --git a/src/screens/error.tsx b/src/screens/error.tsx
new file mode 100644
index 00000000..05fa72c4
--- /dev/null
+++ b/src/screens/error.tsx
@@ -0,0 +1,28 @@
+import { isRouteErrorResponse, useRouteError } from "react-router";
+
+import { Card, CardHeader } from "../components/Card";
+import { ErrorMessage } from "../components/ErrorMessage";
+
+import { NotFoundPage } from "./notFound";
+
+export const ErrorPage = () => {
+	const error = useRouteError();
+
+	if (isRouteErrorResponse(error)) {
+		if (error.status === 404) {
+			return <NotFoundPage />;
+		}
+	}
+
+	return (
+		<>
+			<Card>
+				<CardHeader>Error</CardHeader>
+				<ErrorMessage
+					message="Unexpected error occured while loading page"
+					details={("message" in (error as any)) ? (error as any).message : undefined}
+				/>
+			</Card>
+		</>
+	);
+};
diff --git a/src/screens/event.tsx b/src/screens/event.tsx
index 66c277c1..4191090e 100644
--- a/src/screens/event.tsx
+++ b/src/screens/event.tsx
@@ -5,14 +5,14 @@ import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import { EventInfoTable } from "../components/events/EventInfoTable";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useEvent } from "../hooks/useEvent";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 export type EventPageParams = {
 	id: string;
 };
 
 export const EventPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as EventPageParams;
 
 	const event = useEvent(network.name, { id_eq: id });
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index ced81bdc..480c2ac2 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -11,14 +11,14 @@ import { useCalls } from "../hooks/useCalls";
 import { useEvents } from "../hooks/useEvents";
 import { useExtrinsic } from "../hooks/useExtrinsic";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 type ExtrinsicPageParams = {
 	id: string;
 };
 
 export const ExtrinsicPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as ExtrinsicPageParams;
 
 	const extrinsic = useExtrinsic(network.name, { id_eq: id });
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 703fd422..d6163621 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -17,7 +17,7 @@ import BalancesTable from "../components/balances/BalancesTable";
 import { useStats } from "../hooks/useStats";
 import { NetworkStats } from "../components/network/NetworkStats";
 import { useUsdRates } from "../hooks/useUsdRates";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 import { NetworkTokenDistribution } from "../components/network/NetworkTokenDistribution";
 
 const networkIconStyle = css`
@@ -36,7 +36,7 @@ const tokenDistributionStyle = (theme: Theme) => css`
 `;
 
 export const NetworkPage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 
 	const extrinsics = useExtrinsicsWithoutTotalCount(network.name, undefined, "id_DESC");
 	const blocks = useBlocks(network.name, undefined, "id_DESC");
diff --git a/src/screens/runtime.tsx b/src/screens/runtime.tsx
index 7cae878a..74885e13 100644
--- a/src/screens/runtime.tsx
+++ b/src/screens/runtime.tsx
@@ -4,9 +4,8 @@ import { MenuItem, Select } from "@mui/material";
 import { Card, CardHeader } from "../components/Card";
 import { Devtool } from "../components/Devtool";
 import { useRuntimeSpecVersions } from "../hooks/useRuntimeSpecVersions";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 import { useRuntimeMetadataPallets } from "../hooks/useRuntimeMetadataPallets";
-
 import { tryParseInt } from "../utils/string";
 
 export type RuntimeParams = {
@@ -14,7 +13,7 @@ export type RuntimeParams = {
 };
 
 export const RuntimePage = () => {
-	const { network } = useRootLoaderData();
+	const { network } = useNetworkLoaderData();
 	const { specVersion } = useParams() as RuntimeParams;
 
 	const navigate = useNavigate();
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 3edeb68b..1d460ad5 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -2,24 +2,31 @@
 import { useEffect, useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
-import { isHex } from "@polkadot/util";
-import { isAddress } from "@polkadot/util-crypto";
 
+import { AccountAddress } from "../components/AccountAddress";
+import { ButtonLink } from "../components/ButtonLink";
 import { Card, CardHeader } from "../components/Card";
+import DataViewer from "../components/DataViewer";
 import { ErrorMessage } from "../components/ErrorMessage";
-import ExtrinsicsTable from "../components/extrinsics/ExtrinsicsTable";
-import EventsTable from "../components/events/EventsTable";
+import { Link } from "../components/Link";
 import Loading from "../components/Loading";
 import NotFound from "../components/NotFound";
+import { SearchResultsTable, SearchResultsTableItemAttribute } from "../components/search/SearchResultsTable";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
+import { Time } from "../components/Time";
 
-import { useAccount } from "../hooks/useAccount";
-import { useBlock } from "../hooks/useBlock";
-import { useExtrinsic } from "../hooks/useExtrinsic";
-import { useExtrinsicsByName } from "../hooks/useExtrinsicsByName";
-import { useEventsByName } from "../hooks/useEventsByName";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
-import { useRootLoaderData } from "../hooks/useRootLoaderData";
+import { useSearch } from "../hooks/useSearch";
+
+import { Account } from "../model/account";
+import { Block } from "../model/block";
+import { Event } from "../model/event";
+import { Extrinsic } from "../model/extrinsic";
+
+import { getNetworks } from "../services/networksService";
+import { NetworkSearchResult } from "../services/searchService";
+
+import { encodeAddress } from "../utils/formatAddress";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -39,42 +46,23 @@ const loadingStyle = css`
 	word-break: break-all;
 `;
 
-export const SearchPage = () => {
-	const { network } = useRootLoaderData();
+const eventArgsColCss = css`
+	width: 35%;
+`;
 
+export const SearchPage = () => {
 	const [qs] = useSearchParams();
-	const query = qs.get("query") || "";
-
-	const [forceLoading, setForceLoading] = useState<boolean>(true);
 
-	const maybeHash = isHex(query);
-	const maybeHeight = query?.match(/^\d+$/);
-	const maybeAddress = isAddress(query);
-	const maybeName = query && !maybeHash && !maybeHeight;
-
-	const extrinsicByHash = useExtrinsic(network.name, { hash_eq: query }, { skip: !maybeHash });
-	const blockByHash = useBlock(network.name, { hash_eq: query }, { skip: !maybeHash });
-
-	const account = useAccount(network.name, query, {
-		// extrinsic and block has precedence before account because the hashes may collide
-		// so wait until they are resolved and we know it is not extrinsic or block
-		skip: !maybeAddress || extrinsicByHash.error || blockByHash.error,
-		waitUntil: extrinsicByHash.loading || blockByHash.loading
-	});
+	const query = qs.get("query") || "";
+	const networkNames = qs.getAll("network");
 
-	const blockByHeight = useBlock(network.name, { height_eq: parseInt(query) }, { skip: !maybeHeight });
+	console.log("query", query, networkNames);
 
-	const extrinsicsByName = useExtrinsicsByName(network.name, query, "id_DESC", { skip: !maybeName });
-	const eventsByName = useEventsByName(network.name, query, "id_DESC", { skip: !maybeName });
+	const [forceLoading, setForceLoading] = useState<boolean>(true);
 
-	const allResources = [extrinsicByHash, blockByHash, account, blockByHeight, extrinsicsByName, eventsByName];
-	const multipleResultsResources = [extrinsicsByName, eventsByName];
+	const searchResults = useSearch(query, getNetworks(networkNames));
 
-	const showResults = multipleResultsResources.some(it => it.data?.length);
-	const showLoading = forceLoading || (allResources.some(it => it.loading) && !showResults);
-	const showNotFound = allResources.every(it => it.notFound);
-	const error = allResources.find(it => it.error)?.error;
-	const showError = error && allResources.every(it => it.error || it.notFound);
+	console.log("results", searchResults);
 
 	useEffect(() => {
 		// show loading at least for 1s to prevent flickering
@@ -82,27 +70,29 @@ export const SearchPage = () => {
 		setTimeout(() => setForceLoading(false), 1000);
 	}, [query]);
 
-	useDOMEventTrigger("data-loaded", allResources.every(it => !it.loading));
+	useDOMEventTrigger("data-loaded", !searchResults.loading);
 
 	if (!query) {
 		return <Navigate to="/" replace />;
 	}
 
-	if (!forceLoading) {
-		if (extrinsicByHash.data) {
-			return <Navigate to={`/${network.name}/extrinsic/${extrinsicByHash.data.id}`} replace />;
+	if (!forceLoading && searchResults.data?.total === 1) {
+		const result = searchResults.data.results[0] as NetworkSearchResult;
+
+		if (result.extrinsics.data.length > 0) {
+			return <Navigate to={`/${result.network.name}/extrinsic/${result.extrinsics.data[0]}`} replace />;
 		}
 
-		if (blockByHash.data || blockByHeight.data) {
-			return <Navigate to={`/${network.name}/block/${blockByHash.data?.id || blockByHeight.data?.id}`} replace />;
+		if (result.blocks.data.length > 0) {
+			return <Navigate to={`/${result.network.name}/block/${result.blocks.data[0]}`} replace />;
 		}
 
-		if (account.data) {
-			return <Navigate to={`/${network.name}/account/${account.data.id}`} replace />;
+		if (result.accounts.data.length > 0) {
+			return <Navigate to={`/${result.network.name}/account/${result.accounts.data[0]}`} replace />;
 		}
 	}
 
-	if (showLoading) {
+	if (searchResults.loading || forceLoading) {
 		return (
 			<Card>
 				<CardHeader css={loadingStyle}>
@@ -113,7 +103,7 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (showNotFound) {
+	if (searchResults.notFound || !searchResults.data) {
 		return (
 			<Card>
 				<NotFound>Nothing was found for query <span css={queryStyle}>{query}</span></NotFound>
@@ -121,12 +111,12 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (showError && error) {
+	if (searchResults.error) {
 		return (
 			<Card>
 				<ErrorMessage
 					message={<>Unexpected error occured while searching for <span css={queryStyle}>{query}</span></>}
-					details={error.message}
+					details={searchResults.error.message}
 					showReported
 				/>
 			</Card>
@@ -139,26 +129,208 @@ export const SearchPage = () => {
 				Search results for query <span css={queryStyle}>{query}</span>
 			</CardHeader>
 			<TabbedContent>
-				{!extrinsicsByName.notFound &&
+				{searchResults.data.accountsTotal > 0 &&
+					<TabPane
+						label="Accounts"
+						count={searchResults.data.accountsTotal}
+						value="accounts"
+					>
+						<SearchResultsTable<Account>
+							query={query}
+							results={searchResults.data.results}
+							getItems={(result) => result.accounts}
+							itemsPlural="accounts"
+						>
+							<SearchResultsTableItemAttribute<Account>
+								label="Account"
+								render={(account, network) => (
+									<AccountAddress
+										address={encodeAddress(account.id, network.prefix)}
+										network={network}
+										copyToClipboard="small"
+									/>
+								)}
+							/>
+						</SearchResultsTable>
+					</TabPane>
+				}
+				{searchResults.data.blocksTotal > 0 &&
+					<TabPane
+						label="Blocks"
+						count={searchResults.data.blocksTotal}
+						value="blocks"
+					>
+						<SearchResultsTable<Block>
+							query={query}
+							results={searchResults.data.results}
+							getItems={(result) => result.blocks}
+							itemsPlural="blocks"
+						>
+							<SearchResultsTableItemAttribute<Block>
+								label="Block (Height)"
+								render={(block, network) =>
+									<Link to={`/${network.name}/block/${block.id}`}>
+										{block.height}
+									</Link>
+								}
+							/>
+							<SearchResultsTableItemAttribute<Block>
+								label="Spec version"
+								render={(block) =>
+									<>{block.specVersion}</>
+								}
+							/>
+							<SearchResultsTableItemAttribute<Block>
+								label="Validator"
+								render={(block, network) =>
+									block.validator &&
+									<AccountAddress
+										network={network}
+										address={block.validator}
+										shorten
+										copyToClipboard="small"
+									/>
+								}
+							/>
+							<SearchResultsTableItemAttribute<Block>
+								label="Time"
+								render={(block) =>
+									<Time time={block.timestamp} fromNow tooltip utc />
+								}
+							/>
+						</SearchResultsTable>
+					</TabPane>
+				}
+				{searchResults.data.extrinsicsTotal > 0 &&
 					<TabPane
 						label="Extrinsics"
-						count={extrinsicsByName.pagination.totalCount}
-						loading={extrinsicsByName.loading}
-						error={extrinsicsByName.error}
+						count={searchResults.data.extrinsicsTotal}
 						value="extrinsics"
 					>
-						<ExtrinsicsTable network={network} extrinsics={extrinsicsByName} showAccount showTime />
+						<SearchResultsTable<Extrinsic>
+							query={query}
+							results={searchResults.data.results}
+							getItems={(result) => result.extrinsics}
+							itemsPlural="extrinsics"
+						>
+							<SearchResultsTableItemAttribute<Extrinsic>
+								label={searchResults.data?.results.length === 1
+									? "Extrinsic (ID)"
+									: "Extrinsics"
+								}
+								render={(extrinsic, network) => (
+									<Link to={`/${network.name}/extrinsic/${extrinsic.id}`}>
+										{extrinsic.id}
+									</Link>
+								)}
+							/>
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Extrinsic>
+									label="Name"
+									render={(extrinsic, network) => (
+										<ButtonLink
+											to={`/${network.name}/search?query=${extrinsic.palletName}.${extrinsic.callName}`}
+											size="small"
+											color="secondary"
+										>
+											{extrinsic.palletName}.{extrinsic.callName}
+										</ButtonLink>
+									)}
+								/>
+							}
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Extrinsic>
+									label="Account"
+									render={(extrinsic, network) =>
+										extrinsic.signer &&
+											<AccountAddress
+												network={network}
+												address={extrinsic.signer}
+												shorten
+												copyToClipboard="small"
+											/>
+									}
+								/>
+							}
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Extrinsic>
+									label="Time"
+									render={(extrinsic) => (
+										<Time time={extrinsic.timestamp} fromNow tooltip utc />
+									)}
+								/>
+							}
+						</SearchResultsTable>
 					</TabPane>
 				}
-				{!eventsByName.notFound &&
+				{searchResults.data.eventsTotal > 0 &&
 					<TabPane
 						label="Events"
-						count={eventsByName.pagination.totalCount}
-						loading={eventsByName.loading}
-						error={eventsByName.error}
+						count={searchResults.data.eventsTotal}
 						value="events"
 					>
-						<EventsTable network={network} events={eventsByName} showExtrinsic />
+						<SearchResultsTable<Event>
+							query={query}
+							results={searchResults.data.results}
+							getItems={(result) => result.events}
+							itemsPlural="events"
+						>
+							<SearchResultsTableItemAttribute<Event>
+								label={searchResults.data?.results.length === 1
+									? "Event (ID)"
+									: "Events"
+								}
+								render={(event, network) => (
+									<Link to={`/${network.name}/event/${event.id}`}>
+										{event.id}
+									</Link>
+								)}
+							/>
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Event>
+									label="Name"
+									render={(event, network) => (
+										<ButtonLink
+											to={`/${network.name}/search?query=${event.palletName}.${event.eventName}`}
+											size="small"
+											color="secondary"
+										>
+											{event.palletName}.{event.eventName}
+										</ButtonLink>
+									)}
+								/>
+							}
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Event>
+									label="Extrinsic"
+									render={(event, network) => (
+										<Link to={`/${network.name}/extrinsic/${event.extrinsicId}`}>
+											{event.extrinsicId}
+										</Link>
+									)}
+								/>
+							}
+							{searchResults.data?.results.length === 1 &&
+								<SearchResultsTableItemAttribute<Event>
+									label="Parameters"
+									colCss={eventArgsColCss}
+									render={(event, network) => {
+										if (!event.args) {
+											return null;
+										}
+
+										return (
+											<DataViewer
+												network={network}
+												data={event.args}
+												metadata={event.metadata.event?.args}
+												copyToClipboard
+											/>
+										);
+									}}
+								/>
+							}
+						</SearchResultsTable>
 					</TabPane>
 				}
 			</TabbedContent>
diff --git a/src/services/accountService.ts b/src/services/accountService.ts
index bd9bd3b5..03ad82af 100644
--- a/src/services/accountService.ts
+++ b/src/services/accountService.ts
@@ -3,7 +3,6 @@ import { isAddress } from "@polkadot/util-crypto";
 import { Account } from "../model/account";
 import { AccountIdentity } from "../model/accountIdentity";
 import { MainSquidIdentity } from "../model/main-squid/mainSquidIdentity";
-
 import { DataError } from "../utils/error";
 import { decodeAddress, encodeAddress } from "../utils/formatAddress";
 
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index 0e85c287..70a1038e 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -83,8 +83,8 @@ export async function getAccountBalances(address: string) {
 		balanceSupported: !!hasSupport(network.name, "stats-squid"),
 	}));
 
-	const response = await Promise.allSettled(networks.map(async (network, index) => {
-		const accountBalance = accountBalances[index]!;
+	const response = await Promise.allSettled(accountBalances.map(async (accountBalance) => {
+		const { network } = accountBalance;
 
 		const encodedAddress = encodeAddress(address, network.prefix);
 
@@ -117,7 +117,7 @@ export async function getAccountBalances(address: string) {
 	}));
 
 	response.forEach((result, index) => {
-		const accountBalance = accountBalances[index]!;
+		const accountBalance = accountBalances[index] as AccountBalance;
 
 		if (result.status === "rejected") {
 			accountBalance.error = result.reason;
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index bc212269..b8bd38b1 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -188,7 +188,7 @@ function unifyArchiveBlock(block: ArchiveBlock): Block {
 	};
 }
 
-function unifyExplorerSquidBlock(block: ExplorerSquidBlock): Block {
+export function unifyExplorerSquidBlock(block: ExplorerSquidBlock): Block {
 	return block;
 }
 
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index e0eab6f9..f5fca763 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -75,10 +75,7 @@ async function getArchiveCall(network: string, filter: CallsFilter) {
 		}
 	);
 
-	const data = response.calls[0] && unifyArchiveCall(response.calls[0], network);
-	const call = await addItemMetadata(data, getCallMetadata);
-
-	return call;
+	return response.calls[0] && unifyArchiveCall(response.calls[0], network);
 }
 
 async function getExplorerSquidCall(network: string, filter: CallsFilter) {
@@ -108,9 +105,8 @@ async function getExplorerSquidCall(network: string, filter: CallsFilter) {
 		}
 	);
 
-	const data = response.calls[0] && unifyExplorerSquidCall(response.calls[0], network);
-	const dataWithMetadata = await addItemMetadata(data, getCallMetadata);
-	const call = await addCallArgs(network, dataWithMetadata);
+	const data = response.calls[0] && await unifyExplorerSquidCall(response.calls[0], network);
+	const call = await addCallArgs(network, data);
 
 	return call;
 }
@@ -169,10 +165,7 @@ async function getArchiveCalls(
 		}
 	);
 
-	const data = extractConnectionItems(response?.callsConnection, pagination, unifyArchiveCall, network);
-	const calls = await addItemsMetadata(data, getCallMetadata);
-
-	return calls;
+	return extractConnectionItems(response?.callsConnection, pagination, unifyArchiveCall, network);
 }
 
 async function getExplorerSquidCalls(
@@ -223,10 +216,7 @@ async function getExplorerSquidCalls(
 		}
 	);
 
-	const data = extractConnectionItems(response.callsConnection, pagination, unifyExplorerSquidCall, network);
-	const calls = await addItemsMetadata(data, getCallMetadata);
-
-	return calls;
+	return extractConnectionItems(response.callsConnection, pagination, unifyExplorerSquidCall, network);
 }
 
 async function getArchiveCallsArgs(network: string, callsIds: string[]) {
@@ -262,8 +252,9 @@ async function addCallArgs(network: string, call: Call|undefined) {
 	};
 }
 
-function unifyArchiveCall(call: ArchiveCall, network: string): Omit<Call, "metadata"> {
+async function unifyArchiveCall(call: ArchiveCall, network: string): Promise<Call> {
 	const [palletName, callName] = call.name.split(".") as [string, string];
+	const specVersion = call.block.spec.specVersion;
 
 	return {
 		...call,
@@ -274,16 +265,22 @@ function unifyArchiveCall(call: ArchiveCall, network: string): Omit<Call, "metad
 		blockHeight: call.block.height,
 		timestamp: call.block.timestamp,
 		extrinsicId: call.extrinsic.id,
-		specVersion: call.block.spec.specVersion,
+		specVersion,
 		parentId: call.parent?.id || null,
 		caller: call.origin && call.origin.kind !== "None"
 			? call.origin.value.value
 			: null,
-		args: null
+		args: null,
+		metadata: {
+			call: await getCallRuntimeMetadata(network, specVersion, palletName, callName)
+		}
 	};
 }
 
-function unifyExplorerSquidCall(call: ExplorerSquidCall, network: string): Omit<Call, "metadata"> {
+async function unifyExplorerSquidCall(call: ExplorerSquidCall, network: string): Promise<Call> {
+	const {palletName, callName} = call;
+	const specVersion = call.block.specVersion;
+
 	return {
 		...call,
 		network,
@@ -291,16 +288,13 @@ function unifyExplorerSquidCall(call: ExplorerSquidCall, network: string): Omit<
 		blockHeight: call.block.height,
 		timestamp: call.block.timestamp,
 		extrinsicId: call.extrinsic.id,
-		specVersion: call.block.specVersion,
+		specVersion,
 		parentId: call.parentId,
 		caller: call.callerPublicKey,
-		args: null
-	};
-}
-
-async function getCallMetadata(call: Omit<Call, "metadata">): Promise<Call["metadata"]> {
-	return {
-		call: await getCallRuntimeMetadata(call.network, call.specVersion, call.palletName, call.callName)
+		args: null,
+		metadata: {
+			call: await getCallRuntimeMetadata(network, specVersion, palletName, callName)
+		}
 	};
 }
 
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index 184ee24b..39da2176 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -40,7 +40,7 @@ export async function getEventsByName(
 	order: EventsOrder = "id_DESC",
 	pagination: PaginationOptions
 ): Promise<ItemsResponse<Event>> {
-	const {palletName, eventName} = await normalizeEventName(network, name);
+	const {pallet: palletName, event: eventName} = await normalizeEventName(network, name);
 
 	const filter: EventsFilter = eventName
 		? { palletName_eq: palletName, eventName_eq: eventName }
@@ -113,8 +113,8 @@ export async function normalizeEventName(network: string, name: string) {
 	eventName = event?.name || upperFirst(eventName);
 
 	return {
-		palletName,
-		eventName
+		pallet: palletName,
+		event: eventName
 	};
 }
 
@@ -149,10 +149,7 @@ async function getArchiveEvent(network: string, filter: EventsFilter) {
 		}
 	);
 
-	const data = response.events[0] && unifyArchiveEvent(response.events[0], network);
-	const event = addItemMetadata(data, getEventMetadata);
-
-	return event;
+	return response.events[0] && unifyArchiveEvent(response.events[0], network);
 }
 
 async function getExplorerSquidEvent(network: string, filter: EventsFilter) {
@@ -182,9 +179,8 @@ async function getExplorerSquidEvent(network: string, filter: EventsFilter) {
 		}
 	);
 
-	const data = response.events[0] && unifyExplorerSquidEvent(response.events[0], network);
-	const dataWithMetadata = await addItemMetadata(data, getEventMetadata);
-	const event = await addEventArgs(network, dataWithMetadata);
+	const data = response.events[0] && await unifyExplorerSquidEvent(response.events[0], network);
+	const event = await addEventArgs(network, data);
 
 	return event;
 }
@@ -240,10 +236,7 @@ async function getArchiveEvents(
 		}
 	);
 
-	const items = extractConnectionItems(response.eventsConnection, pagination, unifyArchiveEvent, network);
-	const events = await addItemsMetadata(items, getEventMetadata);
-
-	return events;
+	return extractConnectionItems(response.eventsConnection, pagination, unifyArchiveEvent, network);
 }
 
 async function getExplorerSquidEvents(
@@ -295,9 +288,8 @@ async function getExplorerSquidEvents(
 		}
 	);
 
-	const data = extractConnectionItems(response.eventsConnection, pagination, unifyExplorerSquidEvent, network);
-	const dataWithMetadata = await addItemsMetadata(data, getEventMetadata);
-	const events = await addEventsArgs(network, dataWithMetadata);
+	const data = await extractConnectionItems(response.eventsConnection, pagination, unifyExplorerSquidEvent, network);
+	const events = await addEventsArgs(network, data);
 
 	return events;
 }
@@ -337,7 +329,7 @@ async function addEventArgs(network: string, event: Event|undefined) {
 	};
 }
 
-async function addEventsArgs(network: string, items: ItemsResponse<Event>) {
+export async function addEventsArgs(network: string, items: ItemsResponse<Event>) {
 	const eventIds = items.data.map((event) => event.id);
 
 	const argsByEventId = await getArchiveEventArgs(network, eventIds);
@@ -351,8 +343,9 @@ async function addEventsArgs(network: string, items: ItemsResponse<Event>) {
 	};
 }
 
-function unifyArchiveEvent(event: ArchiveEvent, network: string): Omit<Event, "metadata"> {
+async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<Event> {
 	const [palletName, eventName] = event.name.split(".") as [string, string];
+	const specVersion = event.block.spec.specVersion;
 
 	return {
 		...event,
@@ -365,11 +358,17 @@ function unifyArchiveEvent(event: ArchiveEvent, network: string): Omit<Event, "m
 		extrinsicId: event.extrinsic?.id || null,
 		callId: event.call?.id || null,
 		args: null,
-		specVersion: event.block.spec.specVersion,
+		specVersion,
+		metadata: {
+			event: await getRuntimeEventMetadata(network, specVersion, palletName, eventName)
+		}
 	};
 }
 
-function unifyExplorerSquidEvent(event: ExplorerSquidEvent, network: string): Omit<Event, "metadata"> {
+export async function unifyExplorerSquidEvent(event: ExplorerSquidEvent, network: string): Promise<Event> {
+	const {palletName, eventName} = event;
+	const specVersion = event.block.specVersion;
+
 	return {
 		...event,
 		network,
@@ -379,13 +378,10 @@ function unifyExplorerSquidEvent(event: ExplorerSquidEvent, network: string): Om
 		extrinsicId: event.extrinsic?.id || null,
 		callId: event.call?.id || null,
 		args: null,
-		specVersion: event.block.specVersion,
-	};
-}
-
-async function getEventMetadata(event: Omit<Event, "metadata">): Promise<Event["metadata"]> {
-	return {
-		event: await getRuntimeEventMetadata(event.network, event.specVersion, event.palletName, event.eventName)
+		specVersion,
+		metadata: {
+			event: await getRuntimeEventMetadata(network, specVersion, palletName, eventName)
+		}
 	};
 }
 
@@ -423,7 +419,7 @@ function eventsFilterToArchiveFilter(filter?: EventsFilter) {
 	return filter;
 }
 
-function eventsFilterToExplorerSquidFilter(filter?: EventsFilter) {
+export function eventsFilterToExplorerSquidFilter(filter?: EventsFilter) {
 	if (!filter) {
 		return undefined;
 	}
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index cd9a5555..4c3e278c 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -36,7 +36,7 @@ export async function getExtrinsicsByName(
 	order: ExtrinsicsOrder = "id_DESC",
 	pagination: PaginationOptions,
 ) {
-	const {palletName, callName} = await normalizeExtrinsicName(network, name);
+	const {pallet: palletName, call: callName} = await normalizeExtrinsicName(network, name);
 
 	const filter: ExtrinsicsFilter = callName
 		? { palletName_eq: palletName, callName_eq: callName }
@@ -99,8 +99,8 @@ export async function normalizeExtrinsicName(network: string, name: string) {
 	callName = call?.name || lowerFirst(callName);
 
 	return {
-		palletName,
-		callName
+		pallet: palletName,
+		call: callName
 	};
 }
 
@@ -140,10 +140,7 @@ async function getArchiveExtrinsic(network: string, filter?: ExtrinsicsFilter) {
 		}
 	);
 
-	const data = response.extrinsics[0] && unifyArchiveExtrinsic(response.extrinsics[0], network);
-	const extrinsic = await addItemMetadata(data, getExtrinsicMetadata);
-
-	return extrinsic;
+	return response.extrinsics[0] && unifyArchiveExtrinsic(response.extrinsics[0], network);
 }
 
 async function getArchiveExtrinsics(
@@ -202,10 +199,7 @@ async function getArchiveExtrinsics(
 		}
 	);
 
-	const items = extractConnectionItems(response.extrinsicsConnection, pagination, unifyArchiveExtrinsic, network);
-	const extrinsics = await addItemsMetadata(items, getExtrinsicMetadata);
-
-	return extrinsics;
+	return extractConnectionItems(response.extrinsicsConnection, pagination, unifyArchiveExtrinsic, network);
 }
 
 async function getExplorerSquidExtrinsics(
@@ -262,14 +256,12 @@ async function getExplorerSquidExtrinsics(
 		}
 	);
 
-	const items = extractConnectionItems(response.extrinsicsConnection, pagination, unifyExplorerSquidExtrinsic, network);
-	const extrinsics = await addItemsMetadata(items, getExtrinsicMetadata);
-
-	return extrinsics;
+	return extractConnectionItems(response.extrinsicsConnection, pagination, unifyExplorerSquidExtrinsic, network);
 }
 
-function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Omit<Extrinsic, "metadata"> {
+async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Promise<Extrinsic> {
 	const [palletName, callName] = extrinsic.call.name.split(".") as [string, string];
+	const specVersion = extrinsic.block.spec.specVersion;
 
 	return {
 		...extrinsic,
@@ -284,11 +276,17 @@ function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Om
 		signature: extrinsic.signature?.signature?.value || extrinsic.signature?.signature || null,
 		fee: extrinsic.fee ? BigInt(extrinsic.fee) : null,
 		tip: extrinsic.tip ? BigInt(extrinsic.tip) : null,
-		specVersion: extrinsic.block.spec.specVersion
+		specVersion,
+		metadata: {
+			call: await getCallRuntimeMetadata(network, specVersion, palletName, callName)
+		}
 	};
 }
 
-function unifyExplorerSquidExtrinsic(extrinsic: ExplorerSquidExtrinsic, network: string): Omit<Extrinsic, "metadata"> {
+export async function unifyExplorerSquidExtrinsic(extrinsic: ExplorerSquidExtrinsic, network: string): Promise<Extrinsic> {
+	const {palletName, callName} = extrinsic.mainCall;
+	const specVersion = extrinsic.block.specVersion;
+
 	return {
 		...extrinsic,
 		network,
@@ -304,11 +302,14 @@ function unifyExplorerSquidExtrinsic(extrinsic: ExplorerSquidExtrinsic, network:
 		error: extrinsic.error && JSON.parse(extrinsic.error),
 		fee: extrinsic.fee ? BigInt(extrinsic.fee) : null,
 		tip: extrinsic.tip ? BigInt(extrinsic.tip) : null,
-		specVersion: extrinsic.block.specVersion
+		specVersion,
+		metadata: {
+			call: await getCallRuntimeMetadata(network, specVersion, palletName, callName)
+		}
 	};
 }
 
-async function getExtrinsicMetadata(extrinsic: Omit<Extrinsic, "metadata">): Promise<Extrinsic["metadata"]> {
+export async function getExtrinsicMetadata(extrinsic: Omit<Extrinsic, "metadata">): Promise<Extrinsic["metadata"]> {
 	return {
 		call: await getCallRuntimeMetadata(extrinsic.network, extrinsic.specVersion, extrinsic.palletName, extrinsic.callName)
 	};
@@ -347,7 +348,7 @@ function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 	return filter;
 }
 
-function extrinsicFilterToExplorerSquidFilter(filter?: ExtrinsicsFilter) {
+export function extrinsicFilterToExplorerSquidFilter(filter?: ExtrinsicsFilter) {
 	if (!filter) {
 		return undefined;
 	}
diff --git a/src/services/networksService.ts b/src/services/networksService.ts
index 3eba9705..28bc2a43 100644
--- a/src/services/networksService.ts
+++ b/src/services/networksService.ts
@@ -1,6 +1,8 @@
 import { Network } from "../model/network";
 
-import networks from "../networks.json";
+import networksJson from "../networks.json";
+
+const networks = networksJson as Network[];
 
 export function getArchive(network: string) {
 	return getNetwork(network).squids["archive"];
@@ -22,8 +24,8 @@ export function getStatsSquid(network: string) {
 	return getNetwork(network).squids["stats"];
 }
 
-export function getNetworks() {
-	return networks as Network[];
+export function getNetworks(names?: string[]) {
+	return networks.filter(it => !names || names.includes(it.name));
 }
 
 export function getNetwork(name: string): Network;
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
new file mode 100644
index 00000000..5fe1b889
--- /dev/null
+++ b/src/services/searchService.ts
@@ -0,0 +1,315 @@
+import { isHex } from "@polkadot/util";
+import { isAddress } from "@polkadot/util-crypto";
+
+import { ExplorerSquidBlock } from "../model/explorer-squid/explorerSquidBlock";
+import { ExplorerSquidEvent } from "../model/explorer-squid/explorerSquidEvent";
+import { ExplorerSquidExtrinsic } from "../model/explorer-squid/explorerSquidExtrinsic";
+
+import { Account } from "../model/account";
+import { Block } from "../model/block";
+import { Event } from "../model/event";
+import { Extrinsic } from "../model/extrinsic";
+import { ItemsConnection } from "../model/itemsConnection";
+import { ItemsResponse } from "../model/itemsResponse";
+import { Network } from "../model/network";
+
+import { warningAssert } from "../utils/assert";
+import { extractConnectionItems } from "../utils/extractConnectionItems";
+import { decodeAddress, encodeAddress } from "../utils/formatAddress";
+
+import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
+import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
+import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
+import { fetchExplorerSquid } from "./fetchService";
+import { getNetworks, hasSupport } from "./networksService";
+
+export type ItemId = {
+	id: string;
+}
+
+export type NetworkSearchResult = {
+	network: Network;
+	accounts: ItemsResponse<Account>;
+	blocks: ItemsResponse<Block>;
+	extrinsics: ItemsResponse<Extrinsic>;
+	events: ItemsResponse<Event>;
+	total: number;
+}
+
+export type SearchResult = {
+	results: NetworkSearchResult[];
+	accountsTotal: number;
+	blocksTotal: number;
+	extrinsicsTotal: number;
+	eventsTotal: number;
+	total: number;
+};
+
+export async function search(query: string, networks: Network[] = []): Promise<SearchResult> {
+	if (networks.length === 0) {
+		networks = getNetworks();
+	}
+
+	const maybeHash = isHex(query);
+	const maybeAddress = isAddress(query);
+
+	const promiseResults = await Promise.allSettled(networks.map(async network => await searchNetwork(network, query, networks.length === 1)));
+
+	const results = promiseResults.filter(result => !!(result as any).value).map(result => (result as any).value as NetworkSearchResult);
+	let nonEmptyResults = results.filter((result) => result.total > 0);
+
+	if (maybeHash && maybeAddress && nonEmptyResults.length === 0) {
+		// if hash doesn't belong to any extrinsic or block, consider it as account's public key
+		nonEmptyResults = results.map<NetworkSearchResult>((result) => (
+			{
+				...result,
+				accounts: {
+					data: [{
+						id: decodeAddress(query),
+						address: encodeAddress(query, result.network.prefix),
+						identity: null
+					}],
+					pagination: {
+						offset: 0,
+						limit: 0,
+						hasNextPage: false,
+						totalCount: 1
+					}
+				},
+				total: 1
+			}
+		));
+	}
+
+	const accountsTotal = nonEmptyResults.reduce((total, result) => total + (result.accounts.pagination.totalCount || 0), 0);
+	const blocksTotal = nonEmptyResults.reduce((total, result) => total + (result.blocks.pagination.totalCount || 0), 0);
+	const extrinsicsTotal = nonEmptyResults.reduce((total, result) => total + (result.extrinsics.pagination.totalCount || 0), 0);
+	const eventsTotal = nonEmptyResults.reduce((total, result) => total + (result.events.pagination.totalCount || 0), 0);
+	const total = nonEmptyResults.reduce((total, result) => total + result.total, 0);
+
+	const result: SearchResult = {
+		results: nonEmptyResults,
+		accountsTotal,
+		blocksTotal,
+		extrinsicsTotal,
+		eventsTotal,
+		total
+	};
+
+	warningAssert(!maybeHash || blocksTotal + extrinsicsTotal <= 1, {
+		message: "Blocks' and extrinsics' hashes should be unique",
+		query,
+		result
+	});
+
+	return result;
+}
+
+/*** PRIVATE ***/
+
+async function searchNetwork(network: Network, query: string, fetchAll = false) {
+	if (!hasSupport(network.name, "explorer-squid")) {
+		return undefined;
+	}
+
+	let extrinsicsFilter: ExtrinsicsFilter = {id_eq: ""}; // default failing filter
+	let eventsFilter: EventsFilter = {id_eq: ""}; // default failing filter
+	let blocksFilter: BlocksFilter = {id_eq: ""}; // default failing filter
+	let extrinsicsByNameCounterId = ""; // default failing filter
+	let eventsByNameCounterId = ""; // default failing filter
+
+	const maybeHash = isHex(query);
+	const maybeHeight = query?.match(/^\d+$/);
+	const maybeAddress = isAddress(query);
+	const maybeName = query && !maybeHash && !maybeHeight; //&& !maybeAddress;
+
+	if (maybeHash) {
+		extrinsicsFilter = {hash_eq: query};
+		blocksFilter = {hash_eq: query};
+	} else if (maybeHeight) {
+		blocksFilter = {height_eq: parseInt(query)};
+	} else if (maybeName) {
+		const extrinsicName = await normalizeExtrinsicName(network.name, query);
+		const eventName = await normalizeEventName(network.name, query);
+
+		extrinsicsByNameCounterId = extrinsicName.call
+			? `Extrinsics.${extrinsicName.pallet}.${extrinsicName.call}`
+			: `Extrinsics.${extrinsicName.pallet}`;
+
+		eventsByNameCounterId = eventName.event
+			? `Events.${eventName.pallet}.${eventName.event}`
+			: `Events.${eventName.pallet}`;
+
+		if (fetchAll) {
+			extrinsicsFilter = extrinsicName.call
+				? { palletName_eq: extrinsicName.pallet, callName_eq: extrinsicName.call }
+				: { palletName_eq: extrinsicName.pallet };
+
+			eventsFilter = eventName.event
+				? { palletName_eq: eventName.pallet, eventName_eq: eventName.event }
+				: { palletName_eq: eventName.pallet };
+		}
+	}
+
+	const response = await fetchExplorerSquid<{
+		blocks: ItemsConnection<ExplorerSquidBlock>,
+		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
+		events: ItemsConnection<ExplorerSquidEvent>,
+		extrinsicsByNameCounter: {total: number} | null,
+		eventsByNameCounter: {total: number} | null
+	}>(
+		network.name,
+		`query (
+			$limit: Int,
+			$blocksFilter: BlockWhereInput,
+			$eventsFilter: EventWhereInput,
+			$extrinsicsFilter: ExtrinsicWhereInput,
+			$extrinsicsByNameCounterId: String!,
+			$eventsByNameCounterId: String!
+		) {
+			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_DESC) {
+				edges {
+					node {
+						id
+						hash
+						height
+						timestamp
+						parentHash
+						validator
+						specVersion
+					}
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+				}
+			},
+			extrinsics: extrinsicsConnection(first: $limit, where: $extrinsicsFilter, orderBy: id_DESC) {
+				edges {
+					node {
+						id
+						extrinsicHash
+						block {
+							id
+							hash
+							height
+							timestamp
+							specVersion
+						}
+						mainCall {
+							callName
+							palletName
+						}
+						indexInBlock
+						success
+						tip
+						fee
+						signerPublicKey
+						error
+						version
+					}
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+				}
+			}
+			events: eventsConnection(first: $limit, where: $eventsFilter, orderBy: id_DESC) {
+				edges {
+					node {
+						id
+						eventName
+						palletName
+						block {
+							id
+							height
+							timestamp
+							specVersion
+						}
+						extrinsic {
+							id
+						}
+						call {
+							id
+						}
+					}
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+				}
+			}
+			extrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {
+				total
+			}
+			eventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {
+				total
+			}
+		}`,
+		{
+			limit: fetchAll ? 10 : 1,
+			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
+			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
+			eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
+			extrinsicsByNameCounterId,
+			eventsByNameCounterId,
+		}
+	);
+
+	const result: NetworkSearchResult = {
+		network,
+		accounts: {
+			data: [],
+			pagination: {
+				offset: 0,
+				limit: 0,
+				hasNextPage: false,
+				totalCount: 0,
+			}
+		},
+		blocks: await extractConnectionItems(response.blocks, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidBlock),
+		extrinsics: await extractConnectionItems(response.extrinsics, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidExtrinsic, network.name),
+		events: await addEventsArgs(network.name, await extractConnectionItems(response.events, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidEvent, network.name)),
+		total: 0
+	};
+
+	if (maybeHash || maybeHeight) {
+		result.blocks.pagination.totalCount = result.blocks.data.length;
+		result.extrinsics.pagination.totalCount = result.extrinsics.data.length;
+		result.events.pagination.totalCount = 0;
+	} else if (maybeName) {
+		result.blocks.pagination.totalCount = result.blocks.data.length;
+		result.extrinsics.pagination.totalCount = response.extrinsicsByNameCounter?.total || 0;
+		result.events.pagination.totalCount = response.eventsByNameCounter?.total || 0;
+	}
+
+	if (maybeAddress) {
+		const encodedAddress = encodeAddress(query, network.prefix);
+
+		console.log("encoded address", network.name, encodedAddress);
+
+		if (query === encodedAddress) {
+			result.accounts.data = [{
+				id: decodeAddress(query),
+				address: encodedAddress,
+				identity: null
+			}];
+
+			result.accounts.pagination.totalCount = 1;
+		}
+	}
+
+	result.total =
+		(result.accounts.pagination.totalCount || 0)
+		+ (result.blocks.pagination.totalCount || 0)
+		+ (result.extrinsics.pagination.totalCount || 0)
+		+ (result.events.pagination.totalCount || 0);
+
+	return result;
+}
diff --git a/src/services/statsService.ts b/src/services/statsService.ts
index 8c34b395..b177167a 100644
--- a/src/services/statsService.ts
+++ b/src/services/statsService.ts
@@ -48,7 +48,7 @@ export async function getStats(
 /*** PRIVATE ***/
 
 function unifyStats(stats: Omit<Stats, "circulatingValueTotal" & "stakedValuePercentage">, networkName: string): Stats {
-	const network = getNetwork(networkName)!;
+	const network = getNetwork(networkName);
 
 	return {
 		...stats,
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index 90836034..0a2f5ec0 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -91,7 +91,7 @@ async function getMainSquidTransfers(
 		}
 	);
 
-	const items = extractConnectionItems(response.transfersConnection, pagination, unifyMainSquidTransfer, network);
+	const items = await extractConnectionItems(response.transfersConnection, pagination, unifyMainSquidTransfer, network);
 	const transfers = await addExtrinsicsInfo(network, items);
 
 	return transfers;
diff --git a/src/utils/assert.ts b/src/utils/assert.ts
index ba46524a..7dc0a8eb 100644
--- a/src/utils/assert.ts
+++ b/src/utils/assert.ts
@@ -1,8 +1,8 @@
 import { rollbar } from "../rollbar";
 
-export function assert(value: any, condition: any) {
+export function warningAssert(condition: any, data?: any) {
 	if (!condition) {
-		console.warn("Assert failed", {value});
-		rollbar.warning("Assert failed", {value});
+		console.warn("Assert failed", data);
+		rollbar.warning("Assert failed", data);
 	}
 }
diff --git a/src/utils/extractConnectionItems.ts b/src/utils/extractConnectionItems.ts
index 6db832ac..c8fac940 100644
--- a/src/utils/extractConnectionItems.ts
+++ b/src/utils/extractConnectionItems.ts
@@ -2,14 +2,20 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
-export function extractConnectionItems<R = any, T = any, A extends any[] = any[]>(
+export async function extractConnectionItems<R = any, T = any, A extends any[] = any[]>(
 	connection: ItemsConnection<T>,
 	pagination: PaginationOptions,
-	transformNode: (node: T, ...a: A) => R,
+	transformNode: (node: T, ...a: A) => R|Promise<R>,
 	...additionalArgs: A
-): ItemsResponse<R> {
+): Promise<ItemsResponse<R>> {
+	const data = [];
+
+	for (const edge of connection.edges) {
+		data.push(await transformNode(edge.node, ...additionalArgs));
+	}
+
 	return {
-		data: connection.edges.map((edge) => transformNode(edge.node, ...additionalArgs)),
+		data,
 		pagination: {
 			...pagination,
 			hasNextPage: connection.pageInfo.hasNextPage,
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 33652351..c30753e7 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -18,5 +18,5 @@ export function tryParseInt(str?: string) {
 		return undefined;
 	}
 
-	return parseInt(str) || undefined;
+	return +str || undefined;
 }
diff --git a/src/workers/runtimeSpecWorker.runtime.ts b/src/workers/runtimeSpecWorker.runtime.ts
index f5e1d0be..43becbf4 100644
--- a/src/workers/runtimeSpecWorker.runtime.ts
+++ b/src/workers/runtimeSpecWorker.runtime.ts
@@ -20,12 +20,12 @@ class RuntimeSpecWorkerRuntime extends WebWorkerRuntime implements RuntimeSpecWo
 
 		const response = await fetchArchive<{metadata: {hex: `0x${string}`}[]}>(
 			network, `
-						query ($specVersion: Int!) {
-							metadata(where: {specVersion_eq: $specVersion}, orderBy: specVersion_DESC) {
-								hex
-							}
-						}
-					`,
+				query ($specVersion: Int!) {
+					metadata(where: {specVersion_eq: $specVersion}, orderBy: specVersion_DESC) {
+						hex
+					}
+				}
+			`,
 			{
 				specVersion
 			}

From 2429b8a3da7137192a9c648d7bc64a25bdc9887d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Thu, 19 Oct 2023 23:09:51 +0200
Subject: [PATCH 02/21] totalCount property refactoring

---
 src/components/search/SearchResultsTable.tsx |  4 +--
 src/hooks/usePaginatedResource.ts            |  3 ++
 src/hooks/usePagination.ts                   |  1 -
 src/model/itemsResponse.ts                   |  4 +--
 src/model/resource.ts                        |  1 +
 src/screens/account.tsx                      |  6 ++--
 src/screens/block.tsx                        |  6 ++--
 src/screens/call.tsx                         |  2 +-
 src/screens/extrinsic.tsx                    |  4 +--
 src/screens/network.tsx                      |  8 ++---
 src/services/eventsService.ts                |  2 +-
 src/services/extrinsicsService.ts            |  2 +-
 src/services/searchService.ts                | 38 ++++++++++----------
 src/utils/extractConnectionItems.ts          |  4 +--
 14 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index 56fb8fb9..9b6f4abb 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable.tsx
@@ -66,7 +66,7 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 	const rows = results.flatMap<SearchResultsTableRow<T>>((result) => {
 		const items = getItems(result);
 
-		if (items.data.length === 0 && items.pagination.totalCount) {
+		if (items.data.length === 0 && items.totalCount) {
 			return [{
 				id: `${result.network.name}-0`,
 				item: undefined,
@@ -97,7 +97,7 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 					colCss={colCss}
 					colSpan={({item, result}) => (!item /* TODO || result.error*/) ? Children.count(children) : 1}
 					render={({item, result}) => {
-						const total = getItems(result).pagination.totalCount || 0;
+						const total = getItems(result).totalCount || 0;
 
 						return (
 							<>
diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index 3a912554..66a71409 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -17,6 +17,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 	const rollbar = useRollbar();
 
 	const [data, setData] = useState<T[]>([]);
+	const [totalCount, setTotalCount] = useState<number>();
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<any>();
 
@@ -36,6 +37,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 				});
 
 				setData(items.data);
+				setTotalCount(items.totalCount);
 				pagination.set(items.pagination);
 			} catch(e) {
 				if (e instanceof DataError) {
@@ -66,6 +68,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 	return useMemo(
 		() => ({
 			data,
+			totalCount,
 			loading,
 			notFound: !loading && !error && (!data || data.length === 0),
 			pagination,
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 0f269e84..9cc9da79 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -4,7 +4,6 @@ export type PaginationState = {
 	limit: number;
 	offset: number;
 	hasNextPage: boolean;
-	totalCount?: number
 };
 
 export type Pagination = PaginationState & {
diff --git a/src/model/itemsResponse.ts b/src/model/itemsResponse.ts
index 5210150e..94c28482 100644
--- a/src/model/itemsResponse.ts
+++ b/src/model/itemsResponse.ts
@@ -4,6 +4,6 @@ export type ItemsResponse<T = any> = {
 		offset: number;
 		limit: number;
 		hasNextPage: boolean;
-		totalCount?: number;
-	}
+	},
+	totalCount?: number;
 }
diff --git a/src/model/resource.ts b/src/model/resource.ts
index 12497eef..66ad20f5 100644
--- a/src/model/resource.ts
+++ b/src/model/resource.ts
@@ -1,5 +1,6 @@
 export type Resource<T = any> = {
 	data?: T;
+	totalCount?: number;
 	loading: boolean;
 	notFound: boolean;
 	error?: any;
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index 883b6030..dfd5f10e 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -159,7 +159,7 @@ export const AccountPage = () => {
 						</TabPane>
 						<TabPane
 							label="Extrinsics"
-							count={extrinsics.pagination.totalCount}
+							count={extrinsics.totalCount}
 							loading={extrinsics.loading}
 							error={extrinsics.error}
 							value="extrinsics"
@@ -169,7 +169,7 @@ export const AccountPage = () => {
 						{hasSupport(network.name, "explorer-squid") &&
 							<TabPane
 								label="Calls"
-								count={calls.pagination.totalCount}
+								count={calls.totalCount}
 								loading={calls.loading}
 								error={calls.error}
 								value="calls"
@@ -180,7 +180,7 @@ export const AccountPage = () => {
 						{hasSupport(network.name, "main-squid") &&
 							<TabPane
 								label="Transfers"
-								count={transfers.pagination.totalCount}
+								count={transfers.totalCount}
 								loading={transfers.loading}
 								error={transfers.error}
 								value="transfers"
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index f2746280..1b6d673d 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -55,7 +55,7 @@ export const BlockPage = () => {
 					<TabbedContent>
 						<TabPane
 							label="Extrinsics"
-							count={extrinsics.pagination.totalCount}
+							count={extrinsics.totalCount}
 							loading={extrinsics.loading}
 							error={extrinsics.error}
 							value="extrinsics"
@@ -64,7 +64,7 @@ export const BlockPage = () => {
 						</TabPane>
 						<TabPane
 							label="Calls"
-							count={calls.pagination.totalCount}
+							count={calls.totalCount}
 							loading={calls.loading}
 							error={calls.error}
 							value="calls"
@@ -73,7 +73,7 @@ export const BlockPage = () => {
 						</TabPane>
 						<TabPane
 							label="Events"
-							count={events.pagination.totalCount}
+							count={events.totalCount}
 							loading={events.loading}
 							error={events.error}
 							value="events"
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index f35c5f39..ed106e48 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -37,7 +37,7 @@ export const CallPage = () => {
 					<TabbedContent>
 						<TabPane
 							label="Events"
-							count={events.pagination.totalCount}
+							count={events.totalCount}
 							loading={events.loading}
 							error={events.error}
 							value="events"
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index 480c2ac2..8f92fc3b 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -44,7 +44,7 @@ export const ExtrinsicPage = () => {
 					<TabbedContent>
 						<TabPane
 							label="Events"
-							count={events.pagination.totalCount}
+							count={events.totalCount}
 							loading={events.loading}
 							error={events.error}
 							value="events"
@@ -56,7 +56,7 @@ export const ExtrinsicPage = () => {
 						</TabPane>
 						<TabPane
 							label="Calls"
-							count={calls.pagination.totalCount}
+							count={calls.totalCount}
 							loading={calls.loading}
 							error={calls.error}
 							value="calls"
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index d6163621..24370bc7 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -86,7 +86,7 @@ export const NetworkPage = () => {
 				<TabbedContent>
 					<TabPane
 						label="Extrinsics"
-						count={extrinsics.pagination.totalCount}
+						count={extrinsics.totalCount}
 						loading={extrinsics.loading}
 						error={extrinsics.error}
 						value="extrinsics"
@@ -95,7 +95,7 @@ export const NetworkPage = () => {
 					</TabPane>
 					<TabPane
 						label="Blocks"
-						count={blocks.pagination.totalCount}
+						count={blocks.totalCount}
 						loading={blocks.loading}
 						error={blocks.error}
 						value="blocks"
@@ -107,7 +107,7 @@ export const NetworkPage = () => {
 					{hasSupport(network.name, "main-squid") &&
 							<TabPane
 								label="Transfers"
-								count={transfers.pagination.totalCount}
+								count={transfers.totalCount}
 								loading={transfers.loading}
 								error={transfers.error}
 								value="transfers"
@@ -118,7 +118,7 @@ export const NetworkPage = () => {
 					{hasSupport(network.name, "stats-squid") &&
 							<TabPane
 								label="Top holders"
-								count={topHolders.pagination.totalCount}
+								count={topHolders.totalCount}
 								loading={topHolders.loading}
 								error={topHolders.error}
 								value="top-holders"
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index 39da2176..a293f6d7 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -76,7 +76,7 @@ export async function getEventsByName(
 		}
 
 		const events = await getExplorerSquidEvents(network, filter, order, pagination, false);
-		events.pagination.totalCount = countResponse.itemsCounterById.total;
+		events.totalCount = countResponse.itemsCounterById.total;
 
 		return events;
 	}
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index 4c3e278c..090c150a 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -61,7 +61,7 @@ export async function getExtrinsicsByName(
 		);
 
 		const extrinsics = await getExplorerSquidExtrinsics(network, filter, order, pagination, false);
-		extrinsics.pagination.totalCount = countResponse.itemsCounterById?.total;
+		extrinsics.totalCount = countResponse.itemsCounterById?.total;
 
 		return extrinsics;
 	}
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 5fe1b889..7ee80a13 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -73,18 +73,18 @@ export async function search(query: string, networks: Network[] = []): Promise<S
 						offset: 0,
 						limit: 0,
 						hasNextPage: false,
-						totalCount: 1
-					}
+					},
+					totalCount: 1
 				},
 				total: 1
 			}
 		));
 	}
 
-	const accountsTotal = nonEmptyResults.reduce((total, result) => total + (result.accounts.pagination.totalCount || 0), 0);
-	const blocksTotal = nonEmptyResults.reduce((total, result) => total + (result.blocks.pagination.totalCount || 0), 0);
-	const extrinsicsTotal = nonEmptyResults.reduce((total, result) => total + (result.extrinsics.pagination.totalCount || 0), 0);
-	const eventsTotal = nonEmptyResults.reduce((total, result) => total + (result.events.pagination.totalCount || 0), 0);
+	const accountsTotal = nonEmptyResults.reduce((total, result) => total + (result.accounts.totalCount || 0), 0);
+	const blocksTotal = nonEmptyResults.reduce((total, result) => total + (result.blocks.totalCount || 0), 0);
+	const extrinsicsTotal = nonEmptyResults.reduce((total, result) => total + (result.extrinsics.totalCount || 0), 0);
+	const eventsTotal = nonEmptyResults.reduce((total, result) => total + (result.events.totalCount || 0), 0);
 	const total = nonEmptyResults.reduce((total, result) => total + result.total, 0);
 
 	const result: SearchResult = {
@@ -270,8 +270,8 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 				offset: 0,
 				limit: 0,
 				hasNextPage: false,
-				totalCount: 0,
-			}
+			},
+			totalCount: 0,
 		},
 		blocks: await extractConnectionItems(response.blocks, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidBlock),
 		extrinsics: await extractConnectionItems(response.extrinsics, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidExtrinsic, network.name),
@@ -280,13 +280,13 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 	};
 
 	if (maybeHash || maybeHeight) {
-		result.blocks.pagination.totalCount = result.blocks.data.length;
-		result.extrinsics.pagination.totalCount = result.extrinsics.data.length;
-		result.events.pagination.totalCount = 0;
+		result.blocks.totalCount = result.blocks.data.length;
+		result.extrinsics.totalCount = result.extrinsics.data.length;
+		result.events.totalCount = 0;
 	} else if (maybeName) {
-		result.blocks.pagination.totalCount = result.blocks.data.length;
-		result.extrinsics.pagination.totalCount = response.extrinsicsByNameCounter?.total || 0;
-		result.events.pagination.totalCount = response.eventsByNameCounter?.total || 0;
+		result.blocks.totalCount = result.blocks.data.length;
+		result.extrinsics.totalCount = response.extrinsicsByNameCounter?.total || 0;
+		result.events.totalCount = response.eventsByNameCounter?.total || 0;
 	}
 
 	if (maybeAddress) {
@@ -301,15 +301,15 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 				identity: null
 			}];
 
-			result.accounts.pagination.totalCount = 1;
+			result.accounts.totalCount = 1;
 		}
 	}
 
 	result.total =
-		(result.accounts.pagination.totalCount || 0)
-		+ (result.blocks.pagination.totalCount || 0)
-		+ (result.extrinsics.pagination.totalCount || 0)
-		+ (result.events.pagination.totalCount || 0);
+		(result.accounts.totalCount || 0)
+		+ (result.blocks.totalCount || 0)
+		+ (result.extrinsics.totalCount || 0)
+		+ (result.events.totalCount || 0);
 
 	return result;
 }
diff --git a/src/utils/extractConnectionItems.ts b/src/utils/extractConnectionItems.ts
index c8fac940..f0f9de68 100644
--- a/src/utils/extractConnectionItems.ts
+++ b/src/utils/extractConnectionItems.ts
@@ -19,7 +19,7 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 		pagination: {
 			...pagination,
 			hasNextPage: connection.pageInfo.hasNextPage,
-			totalCount: connection.totalCount
-		}
+		},
+		totalCount: connection.totalCount
 	};
 }

From c19e1fbcbcc798404c24cccba08da0e08602597c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Fri, 20 Oct 2023 20:59:45 +0200
Subject: [PATCH 03/21] search refactoring

---
 src/components/AccountAddress.tsx             |   2 +-
 src/components/ItemsTable.tsx                 |   2 +-
 src/components/SearchInput.tsx                |   9 +-
 src/components/account/AccountInfoTable.tsx   |   2 +-
 src/components/balances/BalancesTable.tsx     |   2 +-
 src/components/blocks/BlockInfoTable.tsx      |   2 +-
 src/components/calls/CallInfoTable.tsx        |   2 +-
 .../extrinsics/ExtrinsicInfoTable.tsx         |   2 +-
 src/components/search/SearchResultsTable.tsx  |  79 ++--
 src/model/itemsConnection.ts                  |   8 +-
 src/model/itemsResponse.ts                    |   6 +-
 src/router.tsx                                |   2 +-
 src/screens/search.tsx                        | 158 ++++----
 src/services/accountService.ts                |   2 +-
 src/services/balancesService.ts               |   2 +-
 src/services/callsService.ts                  |   2 +-
 src/services/extrinsicsService.ts             |   2 +-
 src/services/searchService.ts                 | 357 ++++++++++++------
 src/services/transfersService.ts              |   2 +-
 src/utils/{formatAddress.ts => address.ts}    |  12 +-
 src/utils/extractConnectionItems.ts           |   8 +-
 src/utils/items-response.ts                   |  11 +
 22 files changed, 409 insertions(+), 265 deletions(-)
 rename src/utils/{formatAddress.ts => address.ts} (66%)
 create mode 100644 src/utils/items-response.ts

diff --git a/src/components/AccountAddress.tsx b/src/components/AccountAddress.tsx
index 6299c26f..3b648168 100644
--- a/src/components/AccountAddress.tsx
+++ b/src/components/AccountAddress.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
 import { Network } from "../model/network";
-import { encodeAddress } from "../utils/formatAddress";
+import { encodeAddress } from "../utils/address";
 import { shortenHash } from "../utils/shortenHash";
 
 import { Link } from "./Link";
diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index 14014654..6f117e16 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -51,7 +51,7 @@ export type ItemsTableAttributeProps<T, A extends any[], S> = {
 	onSortChange?: (sortOrder: SortOrder<S>) => void;
 	render: ItemsTableDataFn<T, A, ReactNode>;
 	colSpan?: ItemsTableDataFn<T, A, number>;
-	hide?: ItemsTableDataFn<T, A, boolean>;
+	hide?: ItemsTableDataFn<T, A, boolean|undefined>;
 	_data?: T;
 	_additionalData?: A;
 }
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 7d35f4ff..86ada7d2 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -129,7 +129,14 @@ function SearchInput(props: SearchInputProps) {
 
 			e.preventDefault();
 			localStorage.setItem("network", network);
-			navigate(`/search?query=${search}`);
+
+			let url = `/search?query=${search}`;
+
+			if (network !== "*") {
+				url = `${url}&network=${network}`;
+			}
+
+			navigate(url);
 		},
 		[navigate, network, search]
 	);
diff --git a/src/components/account/AccountInfoTable.tsx b/src/components/account/AccountInfoTable.tsx
index df3891d7..84aad101 100644
--- a/src/components/account/AccountInfoTable.tsx
+++ b/src/components/account/AccountInfoTable.tsx
@@ -5,7 +5,7 @@ import { isEthereumAddress } from "@polkadot/util-crypto";
 import { Account } from "../../model/account";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import {InfoTable, InfoTableAttribute } from "../InfoTable";
 
diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
index f21cda87..1dc1fc59 100644
--- a/src/components/balances/BalancesTable.tsx
+++ b/src/components/balances/BalancesTable.tsx
@@ -3,7 +3,7 @@ import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
-import { decodeAddress } from "../../utils/formatAddress";
+import { decodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { Currency } from "../Currency";
diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
index 163b12ef..8818cf78 100644
--- a/src/components/blocks/BlockInfoTable.tsx
+++ b/src/components/blocks/BlockInfoTable.tsx
@@ -1,7 +1,7 @@
 import { Block } from "../../model/block";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
index eb5c312b..5d7b6d6e 100644
--- a/src/components/calls/CallInfoTable.tsx
+++ b/src/components/calls/CallInfoTable.tsx
@@ -7,7 +7,7 @@ import { Call } from "../../model/call";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";
diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx
index 2c1ceb72..c0ca6e74 100644
--- a/src/components/extrinsics/ExtrinsicInfoTable.tsx
+++ b/src/components/extrinsics/ExtrinsicInfoTable.tsx
@@ -7,7 +7,7 @@ import { Extrinsic } from "../../model/extrinsic";
 import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
-import { encodeAddress } from "../../utils/formatAddress";
+import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index 9b6f4abb..104a600d 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable.tsx
@@ -1,28 +1,21 @@
 /** @jsxImportSource @emotion/react */
-import { Children, ReactElement, ReactNode } from "react";
+import React, { Children, ReactElement, useMemo } from "react";
+import { Alert } from "@mui/material";
 import { css } from "@emotion/react";
 
+import { Network } from "../../model/network";
+import { ItemsResponse } from "../../model/itemsResponse";
 import { NetworkSearchResult } from "../../services/searchService";
+import { formatNumber } from "../../utils/number";
 
 import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps } from "../ItemsTable";
 import { Link } from "../Link";
-import { Alert } from "@mui/material";
-import { formatNumber } from "../../utils/number";
-import { ButtonLink } from "../ButtonLink";
-import { Time } from "../Time";
-import { Network } from "../../model/network";
-import { Extrinsic } from "../../model/extrinsic";
-import { ItemsResponse } from "../../model/itemsResponse";
-import React from "react";
 
 const tableStyle = css`
-	table {
-		table-layout: auto;
-	}
 `;
 
 const networkColumnStyle = css`
-	width: 0px;
+	width: 250px;
 `;
 
 const networkStyle = css`
@@ -51,35 +44,40 @@ interface SearchResultsTableProps<T> {
 	itemsPlural: string
 }
 
-export const SearchResultsTableAttribute = <T extends object>(props: ItemsTableAttributeProps<{item: T, result: NetworkSearchResult}, [Network], []>) => <ItemsTableAttribute {...props} />;
 export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;
 
 interface SearchResultsTableRow<T extends object> {
 	id: string;
 	item: T|undefined;
 	result: NetworkSearchResult;
+	collapsed?: boolean;
 }
 
 export const SearchResultsTable = <T extends object>(props: SearchResultsTableProps<T>) => {
 	const { children, query, results, getItems, itemsPlural } = props;
 
-	const rows = results.flatMap<SearchResultsTableRow<T>>((result) => {
-		const items = getItems(result);
-
-		if (items.data.length === 0 && items.totalCount) {
-			return [{
-				id: `${result.network.name}-0`,
-				item: undefined,
-				result
-			}];
-		} else {
-			return items.data.map((it, index) => ({
-				id: `${result.network.name}-${index}`,
-				item: it,
-				result
-			}));
-		}
-	}) || [];
+	const collapseMultiple = results.length > 1;
+
+	const rows = useMemo(() => {
+		return results.flatMap<SearchResultsTableRow<T>>((result) => {
+			const items = getItems(result);
+
+			if (collapseMultiple && (items.totalCount || items.data.length || 0) > 1) {
+				return [{
+					id: `${result.network.name}-0`,
+					item: undefined,
+					result,
+					collapsed: true
+				}];
+			} else {
+				return items.data.map((it, index) => ({
+					id: `${result.network.name}-${index}`,
+					item: it,
+					result
+				}));
+			}
+		}) || [];
+	}, [collapseMultiple]);
 
 	const itemAttributes = Children.map(children, (child, index) => {
 		if (!child) {
@@ -92,19 +90,17 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 
 		if (index === 0) {
 			return (
-				<SearchResultsTableAttribute<T>
+				<ItemsTableAttribute<SearchResultsTableRow<T>>
 					label={label}
 					colCss={colCss}
-					colSpan={({item, result}) => (!item /* TODO || result.error*/) ? Children.count(children) : 1}
-					render={({item, result}) => {
-						const total = getItems(result).totalCount || 0;
-
+					colSpan={({result, collapsed}) => (collapsed /* TODO || result.error*/) ? Children.count(children) : 1}
+					render={({item, result, collapsed}) => {
 						return (
 							<>
 								{item && render(item, result.network)}
-								{!item && (
+								{collapsed && (
 									<Alert severity="warning" icon={false}>
-										{formatNumber(total)} {itemsPlural} found. {" "}
+										{formatNumber(getItems(result).totalCount || 0)} {itemsPlural} found. {" "}
 										<Link to={`/search?query=${query}&network=${result.network.name}`}>
 											View
 										</Link>
@@ -125,7 +121,7 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 		}
 
 		return (
-			<SearchResultsTableAttribute<T>
+			<ItemsTableAttribute<SearchResultsTableRow<T>>
 				label={label}
 				colCss={colCss}
 				render={({item, result}) => {
@@ -135,19 +131,18 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 
 					return render(item, result.network);
 				}}
-				hide={({item, result}) => !item /* TODO || result.error*/}
+				hide={({result, collapsed}) => collapsed /* TODO || result.error*/}
 			/>
 		);
 	}) as any;
 
 	return (
 		<ItemsTable
-			//data={results.map(it => ({...it, id: it.network.name})).filter(it => (getItems(it).pagination.totalCount || 0) > 0)}
 			data={rows}
 			css={tableStyle}
 			data-test="search-results-table"
 		>
-			<SearchResultsTableAttribute
+			<ItemsTableAttribute<SearchResultsTableRow<T>>
 				label="Network"
 				colCss={networkColumnStyle}
 				render={({result}) => (
diff --git a/src/model/itemsConnection.ts b/src/model/itemsConnection.ts
index 3e39cd48..ec8bd668 100644
--- a/src/model/itemsConnection.ts
+++ b/src/model/itemsConnection.ts
@@ -1,4 +1,4 @@
-export type ItemsConnection<T = any> = {
+export type ItemsConnection<T = any, C extends boolean = false> = {
 	edges: {
 		node: T
 	}[],
@@ -7,6 +7,8 @@ export type ItemsConnection<T = any> = {
 		endCursor: string;
 		hasPreviousPage: boolean;
 		hasNextPage: boolean;
-	},
+	}
+	totalCount?: number;
+} & (C extends true ? {
 	totalCount: number;
-}
+} : object)
diff --git a/src/model/itemsResponse.ts b/src/model/itemsResponse.ts
index 94c28482..bb57c8b1 100644
--- a/src/model/itemsResponse.ts
+++ b/src/model/itemsResponse.ts
@@ -1,4 +1,4 @@
-export type ItemsResponse<T = any> = {
+export type ItemsResponse<T = any, C extends boolean = false> = {
 	data: T[];
 	pagination: {
 		offset: number;
@@ -6,4 +6,6 @@ export type ItemsResponse<T = any> = {
 		hasNextPage: boolean;
 	},
 	totalCount?: number;
-}
+} & (C extends true ? {
+	totalCount: number;
+} : object)
diff --git a/src/router.tsx b/src/router.tsx
index 88e20c40..f9940144 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -2,7 +2,7 @@ import { Navigate, createBrowserRouter, redirect } from "react-router-dom";
 
 import { ResultLayout } from "./components/ResultLayout";
 import { getNetwork } from "./services/networksService";
-import { encodeAddress } from "./utils/formatAddress";
+import { encodeAddress } from "./utils/address";
 
 import { AccountPage } from "./screens/account";
 import { BlockPage } from "./screens/block";
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 1d460ad5..d815485b 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -26,7 +26,7 @@ import { Extrinsic } from "../model/extrinsic";
 import { getNetworks } from "../services/networksService";
 import { NetworkSearchResult } from "../services/searchService";
 
-import { encodeAddress } from "../utils/formatAddress";
+import { encodeAddress } from "../utils/address";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -79,16 +79,16 @@ export const SearchPage = () => {
 	if (!forceLoading && searchResults.data?.total === 1) {
 		const result = searchResults.data.results[0] as NetworkSearchResult;
 
-		if (result.extrinsics.data.length > 0) {
-			return <Navigate to={`/${result.network.name}/extrinsic/${result.extrinsics.data[0]}`} replace />;
+		if (result.extrinsics.data[0]) {
+			return <Navigate to={`/${result.network.name}/extrinsic/${result.extrinsics.data[0].id}`} replace />;
 		}
 
-		if (result.blocks.data.length > 0) {
-			return <Navigate to={`/${result.network.name}/block/${result.blocks.data[0]}`} replace />;
+		if (result.blocks.data[0]) {
+			return <Navigate to={`/${result.network.name}/block/${result.blocks.data[0].id}`} replace />;
 		}
 
-		if (result.accounts.data.length > 0) {
-			return <Navigate to={`/${result.network.name}/account/${result.accounts.data[0]}`} replace />;
+		if (result.accounts.data[0]) {
+			return <Navigate to={`/${result.network.name}/account/${result.accounts.data[0].id}`} replace />;
 		}
 	}
 
@@ -214,52 +214,43 @@ export const SearchPage = () => {
 							itemsPlural="extrinsics"
 						>
 							<SearchResultsTableItemAttribute<Extrinsic>
-								label={searchResults.data?.results.length === 1
-									? "Extrinsic (ID)"
-									: "Extrinsics"
-								}
+								label="Extrinsic (ID)"
 								render={(extrinsic, network) => (
 									<Link to={`/${network.name}/extrinsic/${extrinsic.id}`}>
 										{extrinsic.id}
 									</Link>
 								)}
 							/>
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Extrinsic>
-									label="Name"
-									render={(extrinsic, network) => (
-										<ButtonLink
-											to={`/${network.name}/search?query=${extrinsic.palletName}.${extrinsic.callName}`}
-											size="small"
-											color="secondary"
-										>
-											{extrinsic.palletName}.{extrinsic.callName}
-										</ButtonLink>
-									)}
-								/>
-							}
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Extrinsic>
-									label="Account"
-									render={(extrinsic, network) =>
-										extrinsic.signer &&
+							<SearchResultsTableItemAttribute<Extrinsic>
+								label="Name"
+								render={(extrinsic, network) => (
+									<ButtonLink
+										to={`/${network.name}/search?query=${extrinsic.palletName}.${extrinsic.callName}`}
+										size="small"
+										color="secondary"
+									>
+										{extrinsic.palletName}.{extrinsic.callName}
+									</ButtonLink>
+								)}
+							/>
+							<SearchResultsTableItemAttribute<Extrinsic>
+								label="Account"
+								render={(extrinsic, network) =>
+									extrinsic.signer &&
 											<AccountAddress
 												network={network}
 												address={extrinsic.signer}
 												shorten
 												copyToClipboard="small"
 											/>
-									}
-								/>
-							}
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Extrinsic>
-									label="Time"
-									render={(extrinsic) => (
-										<Time time={extrinsic.timestamp} fromNow tooltip utc />
-									)}
-								/>
-							}
+								}
+							/>
+							<SearchResultsTableItemAttribute<Extrinsic>
+								label="Time"
+								render={(extrinsic) => (
+									<Time time={extrinsic.timestamp} fromNow tooltip utc />
+								)}
+							/>
 						</SearchResultsTable>
 					</TabPane>
 				}
@@ -276,60 +267,51 @@ export const SearchPage = () => {
 							itemsPlural="events"
 						>
 							<SearchResultsTableItemAttribute<Event>
-								label={searchResults.data?.results.length === 1
-									? "Event (ID)"
-									: "Events"
-								}
+								label="Event (ID)"
 								render={(event, network) => (
 									<Link to={`/${network.name}/event/${event.id}`}>
 										{event.id}
 									</Link>
 								)}
 							/>
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Event>
-									label="Name"
-									render={(event, network) => (
-										<ButtonLink
-											to={`/${network.name}/search?query=${event.palletName}.${event.eventName}`}
-											size="small"
-											color="secondary"
-										>
-											{event.palletName}.{event.eventName}
-										</ButtonLink>
-									)}
-								/>
-							}
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Event>
-									label="Extrinsic"
-									render={(event, network) => (
-										<Link to={`/${network.name}/extrinsic/${event.extrinsicId}`}>
-											{event.extrinsicId}
-										</Link>
-									)}
-								/>
-							}
-							{searchResults.data?.results.length === 1 &&
-								<SearchResultsTableItemAttribute<Event>
-									label="Parameters"
-									colCss={eventArgsColCss}
-									render={(event, network) => {
-										if (!event.args) {
-											return null;
-										}
+							<SearchResultsTableItemAttribute<Event>
+								label="Name"
+								render={(event, network) => (
+									<ButtonLink
+										to={`/${network.name}/search?query=${event.palletName}.${event.eventName}`}
+										size="small"
+										color="secondary"
+									>
+										{event.palletName}.{event.eventName}
+									</ButtonLink>
+								)}
+							/>
+							<SearchResultsTableItemAttribute<Event>
+								label="Extrinsic"
+								render={(event, network) => (
+									<Link to={`/${network.name}/extrinsic/${event.extrinsicId}`}>
+										{event.extrinsicId}
+									</Link>
+								)}
+							/>
+							<SearchResultsTableItemAttribute<Event>
+								label="Parameters"
+								colCss={eventArgsColCss}
+								render={(event, network) => {
+									if (!event.args) {
+										return null;
+									}
 
-										return (
-											<DataViewer
-												network={network}
-												data={event.args}
-												metadata={event.metadata.event?.args}
-												copyToClipboard
-											/>
-										);
-									}}
-								/>
-							}
+									return (
+										<DataViewer
+											network={network}
+											data={event.args}
+											metadata={event.metadata.event?.args}
+											copyToClipboard
+										/>
+									);
+								}}
+							/>
 						</SearchResultsTable>
 					</TabPane>
 				}
diff --git a/src/services/accountService.ts b/src/services/accountService.ts
index 03ad82af..fcc9f000 100644
--- a/src/services/accountService.ts
+++ b/src/services/accountService.ts
@@ -4,7 +4,7 @@ import { Account } from "../model/account";
 import { AccountIdentity } from "../model/accountIdentity";
 import { MainSquidIdentity } from "../model/main-squid/mainSquidIdentity";
 import { DataError } from "../utils/error";
-import { decodeAddress, encodeAddress } from "../utils/formatAddress";
+import { decodeAddress, encodeAddress } from "../utils/address";
 
 import { getNetwork, hasSupport } from "./networksService";
 import { fetchIdentitiesSquid } from "./fetchService";
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index 70a1038e..d9a50fec 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -7,7 +7,7 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
 import { extractConnectionItems } from "../utils/extractConnectionItems";
-import { encodeAddress } from "../utils/formatAddress";
+import { encodeAddress } from "../utils/address";
 import { rawAmountToDecimal } from "../utils/number";
 
 import { fetchStatsSquid } from "./fetchService";
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index f5fca763..0a83c190 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -7,7 +7,7 @@ import { PaginationOptions } from "../model/paginationOptions";
 
 import { addItemMetadata, addItemsMetadata } from "../utils/addMetadata";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
-import { decodeAddress } from "../utils/formatAddress";
+import { decodeAddress } from "../utils/address";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getCallRuntimeMetadata } from "./runtimeMetadataService";
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index 090c150a..ae852e62 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -8,7 +8,7 @@ import { PaginationOptions } from "../model/paginationOptions";
 
 import { addItemMetadata, addItemsMetadata } from "../utils/addMetadata";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
-import { decodeAddress } from "../utils/formatAddress";
+import { decodeAddress } from "../utils/address";
 import { lowerFirst, upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 7ee80a13..f13b37ba 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -15,13 +15,14 @@ import { Network } from "../model/network";
 
 import { warningAssert } from "../utils/assert";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
-import { decodeAddress, encodeAddress } from "../utils/formatAddress";
+import { decodeAddress, encodeAddress, isAccountPublicKey, isEncodedAddress } from "../utils/address";
 
-import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
-import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
-import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
+import { BlocksFilter, BlocksOrder, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
+import { EventsFilter, EventsOrder, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
+import { ExtrinsicsFilter, ExtrinsicsOrder, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
 import { fetchExplorerSquid } from "./fetchService";
 import { getNetworks, hasSupport } from "./networksService";
+import { emptyResponse } from "../utils/items-response";
 
 export type ItemId = {
 	id: string;
@@ -50,15 +51,12 @@ export async function search(query: string, networks: Network[] = []): Promise<S
 		networks = getNetworks();
 	}
 
-	const maybeHash = isHex(query);
-	const maybeAddress = isAddress(query);
-
 	const promiseResults = await Promise.allSettled(networks.map(async network => await searchNetwork(network, query, networks.length === 1)));
 
 	const results = promiseResults.filter(result => !!(result as any).value).map(result => (result as any).value as NetworkSearchResult);
 	let nonEmptyResults = results.filter((result) => result.total > 0);
 
-	if (maybeHash && maybeAddress && nonEmptyResults.length === 0) {
+	if (isAccountPublicKey(query) && nonEmptyResults.length === 0) {
 		// if hash doesn't belong to any extrinsic or block, consider it as account's public key
 		nonEmptyResults = results.map<NetworkSearchResult>((result) => (
 			{
@@ -96,8 +94,8 @@ export async function search(query: string, networks: Network[] = []): Promise<S
 		total
 	};
 
-	warningAssert(!maybeHash || blocksTotal + extrinsicsTotal <= 1, {
-		message: "Blocks' and extrinsics' hashes should be unique",
+	warningAssert(!isHex(query) || blocksTotal <= 1, {
+		message: "Block hashes should be unique",
 		query,
 		result
 	});
@@ -112,62 +110,120 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 		return undefined;
 	}
 
-	let extrinsicsFilter: ExtrinsicsFilter = {id_eq: ""}; // default failing filter
-	let eventsFilter: EventsFilter = {id_eq: ""}; // default failing filter
-	let blocksFilter: BlocksFilter = {id_eq: ""}; // default failing filter
-	let extrinsicsByNameCounterId = ""; // default failing filter
-	let eventsByNameCounterId = ""; // default failing filter
-
-	const maybeHash = isHex(query);
-	const maybeHeight = query?.match(/^\d+$/);
-	const maybeAddress = isAddress(query);
-	const maybeName = query && !maybeHash && !maybeHeight; //&& !maybeAddress;
-
-	if (maybeHash) {
-		extrinsicsFilter = {hash_eq: query};
-		blocksFilter = {hash_eq: query};
-	} else if (maybeHeight) {
-		blocksFilter = {height_eq: parseInt(query)};
-	} else if (maybeName) {
-		const extrinsicName = await normalizeExtrinsicName(network.name, query);
-		const eventName = await normalizeEventName(network.name, query);
-
-		extrinsicsByNameCounterId = extrinsicName.call
-			? `Extrinsics.${extrinsicName.pallet}.${extrinsicName.call}`
-			: `Extrinsics.${extrinsicName.pallet}`;
-
-		eventsByNameCounterId = eventName.event
-			? `Events.${eventName.pallet}.${eventName.event}`
-			: `Events.${eventName.pallet}`;
-
-		if (fetchAll) {
-			extrinsicsFilter = extrinsicName.call
-				? { palletName_eq: extrinsicName.pallet, callName_eq: extrinsicName.call }
-				: { palletName_eq: extrinsicName.pallet };
-
-			eventsFilter = eventName.event
-				? { palletName_eq: eventName.pallet, eventName_eq: eventName.event }
-				: { palletName_eq: eventName.pallet };
-		}
+	if (isHex(query)) {
+		return searchNetworkByHash(network, query);
+	} else if (query?.match(/^\d+$/)) {
+		return searchNetworkByBlockHeight(network, parseInt(query));
+	} else if (isEncodedAddress(network, query)) {
+		return searchNetworkByEncodedAddress(network, query);
+	} else {
+		return searchNetworkByName(network, query, fetchAll);
 	}
+}
+
+
+async function searchNetworkByHash(network: Network, hash: string) {
+	const blocksFilter: BlocksFilter = {hash_eq: hash};
+	const extrinsicsFilter: ExtrinsicsFilter = {hash_eq: hash};
 
 	const response = await fetchExplorerSquid<{
-		blocks: ItemsConnection<ExplorerSquidBlock>,
-		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
-		events: ItemsConnection<ExplorerSquidEvent>,
-		extrinsicsByNameCounter: {total: number} | null,
-		eventsByNameCounter: {total: number} | null
+		blocks: ItemsConnection<ExplorerSquidBlock, true>,
+		extrinsics: ItemsConnection<ExplorerSquidExtrinsic, true>,
 	}>(
 		network.name,
 		`query (
 			$limit: Int,
 			$blocksFilter: BlockWhereInput,
-			$eventsFilter: EventWhereInput,
 			$extrinsicsFilter: ExtrinsicWhereInput,
-			$extrinsicsByNameCounterId: String!,
-			$eventsByNameCounterId: String!
 		) {
-			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_DESC) {
+			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_ASC) {
+				edges {
+					node {
+						id
+						hash
+						height
+						timestamp
+						parentHash
+						validator
+						specVersion
+					}
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+				}
+				totalCount
+			},
+			extrinsics: extrinsicsConnection(first: $limit, where: $extrinsicsFilter, orderBy: id_ASC) {
+				edges {
+					node {
+						id
+						extrinsicHash
+						block {
+							id
+							hash
+							height
+							timestamp
+							specVersion
+						}
+						mainCall {
+							callName
+							palletName
+						}
+						indexInBlock
+						success
+						tip
+						fee
+						signerPublicKey
+						error
+						version
+					}
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+				}
+				totalCount
+			}
+		}`,
+		{
+			limit: 10,
+			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
+			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
+		}
+	);
+
+	const blocks = await extractConnectionItems(response.blocks, {offset: 0, limit: 10}, unifyExplorerSquidBlock);
+	const extrinsics = await extractConnectionItems(response.extrinsics, {offset: 0, limit: 10}, unifyExplorerSquidExtrinsic, network.name);
+
+	const result: NetworkSearchResult = {
+		network,
+		accounts: emptyResponse(),
+		blocks,
+		extrinsics,
+		events: emptyResponse(),
+		total: blocks.totalCount + extrinsics.totalCount
+	};
+
+	return result;
+}
+
+async function searchNetworkByBlockHeight(network: Network, height: number) {
+	const blocksFilter: BlocksFilter = {height_eq: height};
+
+	const response = await fetchExplorerSquid<{
+		blocks: ItemsConnection<ExplorerSquidBlock, true>,
+	}>(
+		network.name,
+		`query (
+			$limit: Int,
+			$blocksFilter: BlockWhereInput,
+		) {
+			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -185,7 +241,115 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 					hasPreviousPage
 					startCursor
 				}
+				totalCount
+			},
+		}`,
+		{
+			limit: 10,
+			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
+		}
+	);
+
+	const blocks = await extractConnectionItems(response.blocks, {offset: 0, limit: 10}, unifyExplorerSquidBlock);
+
+	const result: NetworkSearchResult = {
+		network,
+		accounts: emptyResponse(),
+		blocks,
+		extrinsics: emptyResponse(),
+		events: emptyResponse(),
+		total: blocks.totalCount
+	};
+
+	return result;
+}
+
+async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string) {
+	const result: NetworkSearchResult = {
+		network,
+		accounts: {
+			data: [{
+				id: decodeAddress(encodedAddress),
+				address: encodedAddress,
+				identity: null
+			}],
+			pagination: {
+				limit: 10,
+				offset: 0,
+				hasNextPage: false
 			},
+			totalCount: 1
+		},
+		blocks: emptyResponse(),
+		extrinsics: emptyResponse(),
+		events: emptyResponse(),
+		total: 1
+	};
+
+	return result;
+}
+
+async function searchNetworkByName(network: Network, query: string, fetchAll: boolean) {
+	const extrinsicName = await normalizeExtrinsicName(network.name, query);
+	const eventName = await normalizeEventName(network.name, query);
+
+	const extrinsicsByNameCounterId = extrinsicName.call
+		? `Extrinsics.${extrinsicName.pallet}.${extrinsicName.call}`
+		: `Extrinsics.${extrinsicName.pallet}`;
+
+	const eventsByNameCounterId = eventName.event
+		? `Events.${eventName.pallet}.${eventName.event}`
+		: `Events.${eventName.pallet}`;
+
+	const countersResponse = await fetchExplorerSquid<{
+		extrinsicsByNameCounter: {total: number} | null,
+		eventsByNameCounter: {total: number} | null
+	}>(
+		network.name,
+		`query (
+			$extrinsicsByNameCounterId: String!,
+			$eventsByNameCounterId: String!
+		) {
+			extrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {
+				total
+			}
+			eventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {
+				total
+			}
+		}`,
+		{
+			extrinsicsByNameCounterId,
+			eventsByNameCounterId,
+		}
+	);
+
+	let extrinsicsFilter: ExtrinsicsFilter = {id_eq: ""}; // default failing filter
+	let eventsFilter: EventsFilter = {id_eq: ""}; // default failing filter
+
+	if (fetchAll) {
+		if (countersResponse.extrinsicsByNameCounter?.total) {
+			extrinsicsFilter = extrinsicName.call
+				? { palletName_eq: extrinsicName.pallet, callName_eq: extrinsicName.call }
+				: { palletName_eq: extrinsicName.pallet };
+		}
+
+		if (countersResponse.eventsByNameCounter?.total) {
+			eventsFilter = eventName.event
+				? { palletName_eq: eventName.pallet, eventName_eq: eventName.event }
+				: { palletName_eq: eventName.pallet };
+		}
+	}
+
+	const response = await fetchExplorerSquid<{
+		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
+		events: ItemsConnection<ExplorerSquidEvent>,
+	}>(
+		network.name,
+		`query (
+			$limit: Int,
+			$eventsFilter: EventWhereInput,
+			$extrinsicsFilter: ExtrinsicWhereInput,
+		) {
 			extrinsics: extrinsicsConnection(first: $limit, where: $extrinsicsFilter, orderBy: id_DESC) {
 				edges {
 					node {
@@ -245,71 +409,42 @@ async function searchNetwork(network: Network, query: string, fetchAll = false)
 					startCursor
 				}
 			}
-			extrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {
-				total
-			}
-			eventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {
-				total
-			}
 		}`,
 		{
-			limit: fetchAll ? 10 : 1,
-			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
+			limit: 10,
 			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
 			eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
-			extrinsicsByNameCounterId,
-			eventsByNameCounterId,
 		}
 	);
 
-	const result: NetworkSearchResult = {
-		network,
-		accounts: {
-			data: [],
-			pagination: {
-				offset: 0,
-				limit: 0,
-				hasNextPage: false,
-			},
-			totalCount: 0,
-		},
-		blocks: await extractConnectionItems(response.blocks, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidBlock),
-		extrinsics: await extractConnectionItems(response.extrinsics, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidExtrinsic, network.name),
-		events: await addEventsArgs(network.name, await extractConnectionItems(response.events, {offset: 0, limit: fetchAll ? 10 : 1}, unifyExplorerSquidEvent, network.name)),
-		total: 0
-	};
-
-	if (maybeHash || maybeHeight) {
-		result.blocks.totalCount = result.blocks.data.length;
-		result.extrinsics.totalCount = result.extrinsics.data.length;
-		result.events.totalCount = 0;
-	} else if (maybeName) {
-		result.blocks.totalCount = result.blocks.data.length;
-		result.extrinsics.totalCount = response.extrinsicsByNameCounter?.total || 0;
-		result.events.totalCount = response.eventsByNameCounter?.total || 0;
-	}
-
-	if (maybeAddress) {
-		const encodedAddress = encodeAddress(query, network.prefix);
-
-		console.log("encoded address", network.name, encodedAddress);
+	const extrinsics = await extractConnectionItems(
+		response.extrinsics,
+		{offset: 0, limit: 10},
+		unifyExplorerSquidExtrinsic,
+		network.name
+	);
 
-		if (query === encodedAddress) {
-			result.accounts.data = [{
-				id: decodeAddress(query),
-				address: encodedAddress,
-				identity: null
-			}];
+	const events = await addEventsArgs(
+		network.name,
+		await extractConnectionItems(
+			response.events,
+			{offset: 0, limit: 10},
+			unifyExplorerSquidEvent,
+			network.name
+		)
+	);
 
-			result.accounts.totalCount = 1;
-		}
-	}
+	extrinsics.totalCount = countersResponse.extrinsicsByNameCounter?.total || 0;
+	events.totalCount = countersResponse.eventsByNameCounter?.total || 0;
 
-	result.total =
-		(result.accounts.totalCount || 0)
-		+ (result.blocks.totalCount || 0)
-		+ (result.extrinsics.totalCount || 0)
-		+ (result.events.totalCount || 0);
+	const result: NetworkSearchResult = {
+		network,
+		accounts: emptyResponse(),
+		blocks: emptyResponse(),
+		extrinsics,
+		events,
+		total: extrinsics.totalCount + events.totalCount
+	};
 
 	return result;
 }
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index 0a2f5ec0..8260fd38 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -4,7 +4,7 @@ import { MainSquidTransfer } from "../model/main-squid/mainSquidTransfer";
 import { PaginationOptions } from "../model/paginationOptions";
 import { Transfer } from "../model/transfer";
 
-import { decodeAddress } from "../utils/formatAddress";
+import { decodeAddress } from "../utils/address";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { rawAmountToDecimal } from "../utils/number";
 
diff --git a/src/utils/formatAddress.ts b/src/utils/address.ts
similarity index 66%
rename from src/utils/formatAddress.ts
rename to src/utils/address.ts
index 038137ab..c110ad85 100644
--- a/src/utils/formatAddress.ts
+++ b/src/utils/address.ts
@@ -1,7 +1,9 @@
 import Keyring from "@polkadot/keyring";
-import { ethereumEncode } from "@polkadot/util-crypto";
+import { ethereumEncode, isAddress } from "@polkadot/util-crypto";
 import { hexToU8a, isHex, u8aToHex } from "@polkadot/util";
 
+import { Network } from "../model/network";
+
 export function decodeAddress(address: string) {
 	try {
 		const keyring = new Keyring();
@@ -35,3 +37,11 @@ export function encodeAddress(
 
 	return address;
 }
+
+export function isEncodedAddress(network: Network, str: string) {
+	return isAddress(str) && str === encodeAddress(str, network.prefix);
+}
+
+export function isAccountPublicKey(str: string) {
+	return isHex(str) && isAddress(str);
+}
diff --git a/src/utils/extractConnectionItems.ts b/src/utils/extractConnectionItems.ts
index f0f9de68..b34a9eca 100644
--- a/src/utils/extractConnectionItems.ts
+++ b/src/utils/extractConnectionItems.ts
@@ -2,12 +2,12 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
-export async function extractConnectionItems<R = any, T = any, A extends any[] = any[]>(
-	connection: ItemsConnection<T>,
+export async function extractConnectionItems<R = any, T = any, A extends any[] = any[], C extends boolean = false>(
+	connection: ItemsConnection<T, C>,
 	pagination: PaginationOptions,
 	transformNode: (node: T, ...a: A) => R|Promise<R>,
 	...additionalArgs: A
-): Promise<ItemsResponse<R>> {
+): Promise<ItemsResponse<R, C>> {
 	const data = [];
 
 	for (const edge of connection.edges) {
@@ -21,5 +21,5 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 			hasNextPage: connection.pageInfo.hasNextPage,
 		},
 		totalCount: connection.totalCount
-	};
+	} as ItemsResponse<R, C>;
 }
diff --git a/src/utils/items-response.ts b/src/utils/items-response.ts
new file mode 100644
index 00000000..cff9db81
--- /dev/null
+++ b/src/utils/items-response.ts
@@ -0,0 +1,11 @@
+export function emptyResponse() {
+	return {
+		data: [],
+		pagination: {
+			offset: 0,
+			limit: 0,
+			hasNextPage: false,
+		},
+		totalCount: 0,
+	};
+}

From 91cb8fd2bdf85ef8fda0107a8c6860a3f7e32d26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Fri, 20 Oct 2023 21:04:03 +0200
Subject: [PATCH 04/21] clean

---
 src/services/callsService.ts      |  1 -
 src/services/eventsService.ts     |  3 +--
 src/services/extrinsicsService.ts |  1 -
 src/utils/addMetadata.ts          | 35 -------------------------------
 src/utils/filterToWhere.ts        | 21 -------------------
 src/utils/queryMetadata.ts        | 15 -------------
 src/utils/tryJsonParse.ts         |  7 -------
 7 files changed, 1 insertion(+), 82 deletions(-)
 delete mode 100644 src/utils/addMetadata.ts
 delete mode 100644 src/utils/filterToWhere.ts
 delete mode 100644 src/utils/queryMetadata.ts
 delete mode 100644 src/utils/tryJsonParse.ts

diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index 0a83c190..6bcc7cb9 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -5,7 +5,6 @@ import { Call } from "../model/call";
 import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { addItemMetadata, addItemsMetadata } from "../utils/addMetadata";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { decodeAddress } from "../utils/address";
 
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index a293f6d7..0ea1bd64 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -7,9 +7,8 @@ import { ItemsCounter } from "../model/itemsCounter";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { addItemMetadata, addItemsMetadata } from "../utils/addMetadata";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
-import { lowerFirst, upperFirst } from "../utils/string";
+import { upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { hasSupport } from "./networksService";
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index ae852e62..775123b0 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -6,7 +6,6 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsCounter } from "../model/itemsCounter";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { addItemMetadata, addItemsMetadata } from "../utils/addMetadata";
 import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { decodeAddress } from "../utils/address";
 import { lowerFirst, upperFirst } from "../utils/string";
diff --git a/src/utils/addMetadata.ts b/src/utils/addMetadata.ts
deleted file mode 100644
index 7409c447..00000000
--- a/src/utils/addMetadata.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ItemsResponse } from "../model/itemsResponse";
-
-export async function addItemMetadata<T, M>(
-	response: T|undefined,
-	getMetadata: (data: T) => M
-) {
-	if (response === undefined) {
-		return undefined;
-	}
-
-	return {
-		...response,
-		metadata: await getMetadata(response)
-	};
-}
-
-
-export async function addItemsMetadata<T, M>(
-	response: ItemsResponse<T>,
-	getMetadata: (data: T) => Promise<M>
-) {
-	const itemsWithMetadata = [];
-
-	for (const item of response.data) {
-		itemsWithMetadata.push({
-			...item,
-			metadata: await getMetadata(item)
-		});
-	}
-
-	return {
-		...response,
-		data: itemsWithMetadata
-	};
-}
diff --git a/src/utils/filterToWhere.ts b/src/utils/filterToWhere.ts
deleted file mode 100644
index 5c63d324..00000000
--- a/src/utils/filterToWhere.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const filterToWhere = (filter: any = {}): string => {
-	let where = "";
-
-	if (Array.isArray(filter)) {
-		return `[
-			${filter.map(filterToWhere).join(", ")}
-		]`;
-	} else if (filter instanceof Object) {
-		where += `{
-			${Object.keys(filter).map(
-		(key) => `${key}: ${filterToWhere(filter[key])}`
-	)}
-		},`;
-	} else if (filter !== "") {
-		const isString = typeof filter === "string";
-		const value = isString ? `"${filter}"` : filter;
-		where += value;
-	}
-
-	return where;
-};
diff --git a/src/utils/queryMetadata.ts b/src/utils/queryMetadata.ts
deleted file mode 100644
index 5e964971..00000000
--- a/src/utils/queryMetadata.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DecodedMetadata } from "../model/decodedMetadata";
-
-export function getCallMetadataByName(metadata: DecodedMetadata, palletName: string, callName: string) {
-	const pallet = metadata.pallets.find(it => it.name.toLowerCase() === palletName.toLowerCase());
-	const call = pallet?.calls.find(it => it.name.toLowerCase() === callName.toLowerCase());
-
-	return call;
-}
-
-export function getEventMetadataByName(metadata: DecodedMetadata, palletName: string, eventName: string) {
-	const pallet = metadata.pallets.find(it => it.name.toLowerCase() === palletName.toLowerCase());
-	const event = pallet?.events.find(it => it.name.toLowerCase() === eventName.toLowerCase());
-
-	return event;
-}
diff --git a/src/utils/tryJsonParse.ts b/src/utils/tryJsonParse.ts
deleted file mode 100644
index 67fefdfa..00000000
--- a/src/utils/tryJsonParse.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function tryJsonParse(value: any) {
-	try {
-		return JSON.parse(value);
-	} catch (e) {
-		return value;
-	}
-}

From 45bfa33e76ca978365538ead95ee223dd659955d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 23 Oct 2023 20:27:54 +0200
Subject: [PATCH 05/21] refactor useResource and usePaginatedResource hooks to
 not return old data when fetch args changed

---
 src/hooks/usePaginatedResource.ts | 87 +++++++++++++++++++++----------
 src/hooks/useResource.ts          | 82 ++++++++++++++++++++---------
 src/model/paginatedResource.ts    |  1 +
 src/model/resource.ts             |  1 -
 4 files changed, 118 insertions(+), 53 deletions(-)

diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index 66a71409..2fc0e462 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRollbar } from "@rollbar/react";
 
 import { FetchOptions } from "../model/fetchOptions";
@@ -9,6 +9,15 @@ import { DataError } from "../utils/error";
 
 import { usePagination } from "./usePagination";
 
+type PaginatedResourceProps<T> = Omit<PaginatedResource<T>, "notFound" | "pagination" | "refetch">;
+
+const defaultResourceProps = {
+	data: [],
+	totalCount: undefined,
+	loading: true,
+	error: undefined,
+};
+
 export function usePaginatedResource<T = any, F extends any[] = any[]>(
 	fetchItems: (...args: [...F, PaginationOptions]) => ItemsResponse<T>|Promise<ItemsResponse<T>>,
 	args: F,
@@ -16,10 +25,10 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 ) {
 	const rollbar = useRollbar();
 
-	const [data, setData] = useState<T[]>([]);
-	const [totalCount, setTotalCount] = useState<number>();
-	const [loading, setLoading] = useState<boolean>(true);
-	const [error, setError] = useState<any>();
+	const fetchRequestKey = useMemo(() => JSON.stringify(args), [JSON.stringify(args)]);
+	const previousFetchRequestKeyRef = useRef<string>();
+
+	const [resourceProps, setResourceProps] = useState<PaginatedResourceProps<T>>(defaultResourceProps);
 
 	const pagination = usePagination();
 
@@ -36,45 +45,67 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 					offset: pagination.offset,
 				});
 
-				setData(items.data);
-				setTotalCount(items.totalCount);
+				setResourceProps((props) => ({
+					...props,
+					data: items.data,
+					totalCount: items.totalCount
+				}));
+
 				pagination.set(items.pagination);
-			} catch(e) {
-				if (e instanceof DataError) {
-					rollbar.error(e);
-					setError(e);
+			} catch(error) {
+				if (error instanceof DataError) {
+					rollbar.error(error);
+					setResourceProps((props) => ({
+						...props,
+						error
+					}));
 				} else {
-					throw e;
+					throw error;
 				}
 			}
 		}
 
-		setLoading(false);
+		setResourceProps((props) => ({
+			...props,
+			loading: false
+		}));
 	}, [
 		fetchItems,
-		JSON.stringify(args),
+		fetchRequestKey,
 		pagination.limit,
 		pagination.offset,
 		options?.skip,
 	]);
 
 	useEffect(() => {
-		setData([]);
-		setError(undefined);
-		setLoading(true);
+		setResourceProps((props) => ({
+			...props,
+			data: [],
+			error: undefined,
+			loading: true
+		}));
 		fetchData();
 	}, [fetchData]);
 
-	return useMemo(
-		() => ({
-			data,
-			totalCount,
-			loading,
-			notFound: !loading && !error && (!data || data.length === 0),
-			pagination,
-			error,
-			refetch: fetchData
-		}) as PaginatedResource<T>,
-		[data, loading, pagination, error, fetchData]
+	return useMemo<PaginatedResource<T>>(
+		() => {
+			if (previousFetchRequestKeyRef.current && previousFetchRequestKeyRef.current !== fetchRequestKey) {
+				// do not return old data if the fetch args changed
+				return ({
+					...defaultResourceProps,
+					notFound: false,
+					pagination,
+					refetch: fetchData
+				});
+			}
+
+			return ({
+				...resourceProps,
+				notFound: !resourceProps.loading && !resourceProps.error && (!resourceProps.data || resourceProps.data.length === 0),
+				pagination,
+				refetch: fetchData
+			});
+		},
+		[fetchRequestKey, resourceProps, pagination, fetchData]
 	);
 }
diff --git a/src/hooks/useResource.ts b/src/hooks/useResource.ts
index 226349ad..addf07c5 100644
--- a/src/hooks/useResource.ts
+++ b/src/hooks/useResource.ts
@@ -1,10 +1,18 @@
 import { useRollbar } from "@rollbar/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { FetchOptions } from "../model/fetchOptions";
 import { Resource } from "../model/resource";
 import { DataError } from "../utils/error";
 
+type ResourceProps<T> = Omit<Resource<T>, "notFound" | "refetch">;
+
+const defaultResourceProps = {
+	data: undefined,
+	loading: true,
+	error: undefined,
+};
+
 export function useResource<T = any, F extends any[] = any[]>(
 	fetchItem: (...args: F) => T|undefined|Promise<T|undefined>,
 	args: F,
@@ -12,9 +20,10 @@ export function useResource<T = any, F extends any[] = any[]>(
 ) {
 	const rollbar = useRollbar();
 
-	const [data, setData] = useState<T>();
-	const [loading, setLoading] = useState<boolean>(true);
-	const [error, setError] = useState<any>();
+	const fetchRequestKey = useMemo(() => JSON.stringify(args), [JSON.stringify(args)]);
+	const previousFetchRequestKeyRef = useRef<string>();
+
+	const [resourceProps, setResourceProps] = useState<ResourceProps<T>>(defaultResourceProps);
 
 	const fetchData = useCallback(async () => {
 		if (options?.waitUntil) {
@@ -25,35 +34,60 @@ export function useResource<T = any, F extends any[] = any[]>(
 		if (!options?.skip) {
 			try {
 				const data = await fetchItem(...args);
-				setData(data);
-			} catch(e) {
-				if (e instanceof DataError) {
-					rollbar.error(e);
-					setError(e);
+				setResourceProps((props) => ({
+					...props,
+					data
+				}));
+			} catch(error) {
+				if (error instanceof DataError) {
+					rollbar.error(error);
+					setResourceProps((props) => ({
+						...props,
+						error: error
+					}));
 				} else {
-					throw e;
+					throw error;
 				}
 			}
 		}
 
-		setLoading(false);
-	}, [fetchItem, JSON.stringify(args), options?.waitUntil, options?.skip]);
+		setResourceProps((props) => ({
+			...props,
+			loading: false
+		}));
+	}, [fetchItem, fetchRequestKey, options?.waitUntil, options?.skip]);
 
 	useEffect(() => {
-		setData(undefined);
-		setError(undefined);
-		setLoading(true);
+		setResourceProps((props) => ({
+			...props,
+			data: undefined,
+			error: undefined,
+			loading: true
+		}));
 		fetchData();
 	}, [fetchData]);
 
-	return useMemo(
-		() => ({
-			data,
-			loading,
-			notFound: !loading && !error && !data,
-			error,
-			refetch: fetchData
-		}) as Resource<T>,
-		[data, loading, error, fetchData]
+	useEffect(() => {
+		previousFetchRequestKeyRef.current = fetchRequestKey;
+	}, [fetchRequestKey]);
+
+	return useMemo<Resource<T>>(
+		() => {
+			if (previousFetchRequestKeyRef.current && previousFetchRequestKeyRef.current !== fetchRequestKey) {
+				// do not return old data if the fetch args changed
+				return ({
+					...defaultResourceProps,
+					notFound: false,
+					refetch: fetchData
+				});
+			}
+
+			return ({
+				...resourceProps,
+				notFound: !resourceProps.loading && !resourceProps.error && !resourceProps.data,
+				refetch: fetchData
+			});
+		},
+		[fetchRequestKey, resourceProps, fetchData]
 	);
 }
diff --git a/src/model/paginatedResource.ts b/src/model/paginatedResource.ts
index 3607491a..1d771525 100644
--- a/src/model/paginatedResource.ts
+++ b/src/model/paginatedResource.ts
@@ -4,4 +4,5 @@ import { Resource } from "./resource";
 
 export type PaginatedResource<T = any> = Resource<T[]> & {
 	pagination: Pagination
+	totalCount?: number;
 }
diff --git a/src/model/resource.ts b/src/model/resource.ts
index 66ad20f5..12497eef 100644
--- a/src/model/resource.ts
+++ b/src/model/resource.ts
@@ -1,6 +1,5 @@
 export type Resource<T = any> = {
 	data?: T;
-	totalCount?: number;
 	loading: boolean;
 	notFound: boolean;
 	error?: any;

From 2c73be3a7b0ba45b13e78763f91d3808d7740c14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 23 Oct 2023 20:30:07 +0200
Subject: [PATCH 06/21] bind selected tab to URL parameter

---
 package-lock.json                | 56 ++++++++++++++++----------------
 package.json                     |  2 +-
 src/components/ResultLayout.tsx  |  5 ++-
 src/components/SearchInput.tsx   |  2 ++
 src/components/TabbedContent.tsx | 29 ++++++++++++-----
 src/hooks/useTabParam.ts         | 34 +++++++++++++++++++
 src/index.tsx                    |  6 ++--
 src/router.tsx                   | 12 +++----
 src/screens/account.tsx          |  4 ++-
 src/screens/block.tsx            | 10 ++++--
 src/screens/call.tsx             |  4 ++-
 src/screens/extrinsic.tsx        |  4 ++-
 src/screens/network.tsx          |  4 ++-
 src/screens/search.tsx           |  7 +++-
 14 files changed, 124 insertions(+), 55 deletions(-)
 create mode 100644 src/hooks/useTabParam.ts

diff --git a/package-lock.json b/package-lock.json
index 6c12a442..2e86601d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "echarts": "^5.4.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.9.0",
+        "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
         "rollbar": "^2.26.1",
         "ts-custom-error": "^3.3.1",
@@ -8351,11 +8351,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
-      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollbar/react": {
@@ -23379,29 +23379,29 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
-      "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
       "dependencies": {
-        "@remix-run/router": "1.4.0"
+        "@remix-run/router": "1.10.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
-      "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
       "dependencies": {
-        "@remix-run/router": "1.4.0",
-        "react-router": "6.9.0"
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -32980,9 +32980,9 @@
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
     "@remix-run/router": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
-      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q=="
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw=="
     },
     "@rollbar/react": {
       "version": "0.11.1",
@@ -43823,20 +43823,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
-      "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
       "requires": {
-        "@remix-run/router": "1.4.0"
+        "@remix-run/router": "1.10.0"
       }
     },
     "react-router-dom": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
-      "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
       "requires": {
-        "@remix-run/router": "1.4.0",
-        "react-router": "6.9.0"
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
       }
     },
     "react-scripts": {
diff --git a/package.json b/package.json
index 5222c378..128c9c69 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "echarts": "^5.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.9.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "rollbar": "^2.26.1",
     "ts-custom-error": "^3.3.1",
diff --git a/src/components/ResultLayout.tsx b/src/components/ResultLayout.tsx
index 6e3d4d30..664312de 100644
--- a/src/components/ResultLayout.tsx
+++ b/src/components/ResultLayout.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { Outlet, useLoaderData } from "react-router-dom";
+import { Outlet, useLoaderData, useLocation } from "react-router-dom";
 import { css, Theme } from "@emotion/react";
 
 import Background from "../assets/detail-page-bgr.svg";
@@ -158,6 +158,9 @@ const footerStyle = css`
 `;
 
 export const ResultLayout = () => {
+	const location = useLocation();
+	console.log("LOCATION", location.pathname, location.search);
+
 	return (
 		<div css={containerStyle}>
 			<div css={backgroundStyle} data-test="background" />
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 86ada7d2..2ed0772f 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -136,6 +136,8 @@ function SearchInput(props: SearchInputProps) {
 				url = `${url}&network=${network}`;
 			}
 
+			console.log("SEARCH", url);
+
 			navigate(url);
 		},
 		[navigate, network, search]
diff --git a/src/components/TabbedContent.tsx b/src/components/TabbedContent.tsx
index b569b7f3..8445ef08 100644
--- a/src/components/TabbedContent.tsx
+++ b/src/components/TabbedContent.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { Children, cloneElement, PropsWithChildren, ReactElement, ReactNode, useState } from "react";
+import { Children, cloneElement, PropsWithChildren, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { CircularProgress, Tab, TabProps, Tabs } from "@mui/material";
 import ErrorIcon from "@mui/icons-material/Warning";
 import { Theme, css } from "@emotion/react";
@@ -66,14 +66,14 @@ export const TabPane = (props: TabPaneProps) => {
 
 export type TabbedContentProps = {
 	children: ReactElement<TabPaneProps>|(ReactElement<TabPaneProps>|false)[];
+	currentTab?: string;
+	onTabChange: (tab: string) => void;
 }
 
 export const TabbedContent = (props: TabbedContentProps) => {
-	const { children } = props;
+	const { children, currentTab: tab, onTabChange } = props;
 
-	const [tab, setTab] = useState<string | undefined>(undefined);
-
-	const tabHandles = Children.map(children, (child) => {
+	const tabHandles = useMemo(() => Children.map(children, (child) => {
 		if (!child) {
 			return null;
 		}
@@ -106,16 +106,27 @@ export const TabbedContent = (props: TabbedContentProps) => {
 				{...restProps}
 			/>
 		);
-	});
+	}), [children]);
+
+	const tabPanes = useMemo(() => Children.map(children, (child) => child && cloneElement(child, {key: child.props.value})), [children]);
+	const currentTabPane = tabPanes.find((it) => it.props.value === tab);
 
-	const tabPanes = Children.map(children, (child) => child && cloneElement(child, {key: child.props.value}));
+	const handleTabChange = useCallback((ev: any, value: string) => {
+		onTabChange?.(value);
+	}, [onTabChange]);
+
+	useEffect(() => {
+		if (!currentTabPane) {
+			tabPanes[0] && onTabChange?.(tabPanes[0].props.value);
+		}
+	}, [currentTabPane, tabPanes, onTabChange]);
 
 	return (
 		<>
 			<div css={tabsWrapperStyle}>
 				<Tabs
 					css={tabsStyle}
-					onChange={(_, tab) => setTab(tab)}
+					onChange={handleTabChange}
 					value={tab || tabHandles[0]?.props.value}
 					variant="scrollable"
 					scrollButtons={false}
@@ -124,7 +135,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 				</Tabs>
 
 			</div>
-			{tab ? tabPanes.find((it) => it.props.value === tab) : tabPanes[0]}
+			{currentTabPane}
 		</>
 	);
 };
diff --git a/src/hooks/useTabParam.ts b/src/hooks/useTabParam.ts
new file mode 100644
index 00000000..e05215db
--- /dev/null
+++ b/src/hooks/useTabParam.ts
@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+
+export type UseTabParamOptions = {
+	paramName?: string;
+	preserveQueryParams?: string[];
+}
+
+export function useTabParam(options: UseTabParamOptions = {}) {
+	const [qs] = useSearchParams();
+	const params = useParams();
+
+	const navigate = useNavigate();
+
+	const currentTab = params[options.paramName || "tab"];
+
+	const setTab = useCallback((newTab: string) => {
+		const path = currentTab ? `./../${newTab}` : newTab;
+		const newQs = new URLSearchParams();
+
+		for (const param of options.preserveQueryParams || []) {
+			for (const values of qs.getAll(param)) {
+				newQs.append(param, values);
+			}
+		}
+
+		navigate({
+			pathname: path,
+			search: newQs.toString()
+		}, {replace: !currentTab});
+	}, [currentTab, navigate]);
+
+	return [currentTab, setTab] as const;
+}
diff --git a/src/index.tsx b/src/index.tsx
index abaa0f38..7e83fadd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,11 +11,13 @@ import reportWebVitals from "./reportWebVitals";
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement
 );
-root.render(
+
+root.render(<App />);
+/*root.render(
 	<React.StrictMode>
 		<App />
 	</React.StrictMode>
-);
+);*/
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/src/router.tsx b/src/router.tsx
index f9940144..ac8b7ad3 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -27,7 +27,7 @@ export const router = createBrowserRouter([
 		element: <ResultLayout />,
 		children: [
 			{
-				path: "search",
+				path: "search/:tab?",
 				element: <SearchPage />,
 			},
 			{
@@ -46,23 +46,23 @@ export const router = createBrowserRouter([
 				errorElement: <ErrorPage />,
 				children: [
 					{
-						index: true,
+						path: ":tab?",
 						element: <NetworkPage />,
 					},
 					{
-						path: "extrinsic/:id",
+						path: "extrinsic/:id/:tab?",
 						element: <ExtrinsicPage />,
 					},
 					{
-						path: "block/:id",
+						path: "block/:id/:tab?",
 						element: <BlockPage />,
 					},
 					{
-						path: "call/:id",
+						path: "call/:id/:tab?",
 						element: <CallPage />,
 					},
 					{
-						path: "account/:address",
+						path: "account/:address/:tab?",
 						element: <AccountPage />,
 						loader: ({ params }) => {
 							const { network: networkName, address } = params;
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index dfd5f10e..961f05ae 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -26,6 +26,7 @@ import { useTransfers } from "../hooks/useTransfers";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 
 import { hasSupport } from "../services/networksService";
+import { useTabParam } from "../hooks/useTabParam";
 
 const accountInfoStyle = css`
 	display: flex;
@@ -83,6 +84,7 @@ export type AccountPageParams = {
 export const AccountPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { address } = useParams() as AccountPageParams;
+	const [tab, setTab] = useTabParam();
 
 	const account = useAccount(network.name, address);
 	const balances = useAccountBalances(address);
@@ -147,7 +149,7 @@ export const AccountPage = () => {
 			</CardRow>
 			{account.data &&
 				<Card data-test="account-related-items">
-					<TabbedContent>
+					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Balances"
 							count={balances.data?.length}
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 1b6d673d..dd5b5991 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useCallback, useEffect } from "react";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
 
 import { BlockInfoTable } from "../components/blocks/BlockInfoTable";
 import { CallsTable } from "../components/calls/CallsTable";
@@ -14,15 +14,19 @@ import { useEvents } from "../hooks/useEvents";
 import { useExtrinsics } from "../hooks/useExtrinsics";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useTabParam } from "../hooks/useTabParam";
 
 export type BlockPageParams = {
 	id: string;
+	tab?: string;
 };
 
 export const BlockPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as BlockPageParams;
 
+	const [tab, setTab] = useTabParam();
+
 	const block = useBlock(network.name, { id_eq: id });
 
 	const extrinsics = useExtrinsics(network.name, { blockId_eq: id }, "id_DESC");
@@ -52,7 +56,7 @@ export const BlockPage = () => {
 			</Card>
 			{block.data &&
 				<Card>
-					<TabbedContent>
+					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Extrinsics"
 							count={extrinsics.totalCount}
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index ed106e48..65071a13 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -9,6 +9,7 @@ import { useCall } from "../hooks/useCall";
 import { useEvents } from "../hooks/useEvents";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useTabParam } from "../hooks/useTabParam";
 
 export type CallPageParams = {
 	id: string;
@@ -17,6 +18,7 @@ export type CallPageParams = {
 export const CallPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as CallPageParams;
+	const [tab, setTab] = useTabParam();
 
 	const call = useCall(network.name, { id_eq: id });
 	const events = useEvents(network.name, { callId_eq: id }, "id_ASC");
@@ -34,7 +36,7 @@ export const CallPage = () => {
 			</Card>
 			{call.data &&
 				<Card>
-					<TabbedContent>
+					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Events"
 							count={events.totalCount}
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index 8f92fc3b..e7a8cd17 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -12,6 +12,7 @@ import { useEvents } from "../hooks/useEvents";
 import { useExtrinsic } from "../hooks/useExtrinsic";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useTabParam } from "../hooks/useTabParam";
 
 type ExtrinsicPageParams = {
 	id: string;
@@ -20,6 +21,7 @@ type ExtrinsicPageParams = {
 export const ExtrinsicPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as ExtrinsicPageParams;
+	const [tab, setTab] = useTabParam();
 
 	const extrinsic = useExtrinsic(network.name, { id_eq: id });
 	const events = useEvents(network.name, { extrinsicId_eq: id }, "id_ASC");
@@ -41,7 +43,7 @@ export const ExtrinsicPage = () => {
 			</Card>
 			{extrinsic.data &&
 				<Card>
-					<TabbedContent>
+					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Events"
 							count={events.totalCount}
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 24370bc7..41f3cf69 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -19,6 +19,7 @@ import { NetworkStats } from "../components/network/NetworkStats";
 import { useUsdRates } from "../hooks/useUsdRates";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
 import { NetworkTokenDistribution } from "../components/network/NetworkTokenDistribution";
+import { useTabParam } from "../hooks/useTabParam";
 
 const networkIconStyle = css`
 	vertical-align: text-bottom;
@@ -37,6 +38,7 @@ const tokenDistributionStyle = (theme: Theme) => css`
 
 export const NetworkPage = () => {
 	const { network } = useNetworkLoaderData();
+	const [tab, setTab] = useTabParam();
 
 	const extrinsics = useExtrinsicsWithoutTotalCount(network.name, undefined, "id_DESC");
 	const blocks = useBlocks(network.name, undefined, "id_DESC");
@@ -83,7 +85,7 @@ export const NetworkPage = () => {
 
 
 			<Card data-test="network-related-items">
-				<TabbedContent>
+				<TabbedContent currentTab={tab} onTabChange={setTab}>
 					<TabPane
 						label="Extrinsics"
 						count={extrinsics.totalCount}
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index d815485b..5a3bc4c0 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -27,6 +27,7 @@ import { getNetworks } from "../services/networksService";
 import { NetworkSearchResult } from "../services/searchService";
 
 import { encodeAddress } from "../utils/address";
+import { useTabParam } from "../hooks/useTabParam";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -56,6 +57,10 @@ export const SearchPage = () => {
 	const query = qs.get("query") || "";
 	const networkNames = qs.getAll("network");
 
+	const [tab, setTab] = useTabParam({
+		preserveQueryParams: ["query", "network"]
+	});
+
 	console.log("query", query, networkNames);
 
 	const [forceLoading, setForceLoading] = useState<boolean>(true);
@@ -128,7 +133,7 @@ export const SearchPage = () => {
 			<CardHeader>
 				Search results for query <span css={queryStyle}>{query}</span>
 			</CardHeader>
-			<TabbedContent>
+			<TabbedContent currentTab={tab} onTabChange={setTab}>
 				{searchResults.data.accountsTotal > 0 &&
 					<TabPane
 						label="Accounts"

From d6764d6d8a8ab83ea20e836e9b0052ecece369dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 24 Oct 2023 11:31:23 +0200
Subject: [PATCH 07/21] fix tests

---
 test/e2e/account.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/account.spec.ts b/test/e2e/account.spec.ts
index 95de201c..6f49c3d2 100644
--- a/test/e2e/account.spec.ts
+++ b/test/e2e/account.spec.ts
@@ -1,6 +1,6 @@
 import { Request } from "@playwright/test";
 
-import { encodeAddress } from "../../src/utils/formatAddress";
+import { encodeAddress } from "../../src/utils/address";
 import { getNetwork } from "../../src/services/networksService";
 
 import { clearCapturedPageEvents, waitForPageEvent } from "../utils/events";

From 3e813477624cc80ca783a4c5219b88ba10a8b186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 24 Oct 2023 17:33:59 +0200
Subject: [PATCH 08/21] use SWR to fetch data in hooks

---
 package-lock.json                             |  46 +++++++
 package.json                                  |   1 +
 .../account/AccountBalancesTable.tsx          |  12 +-
 src/components/account/AccountPortfolio.tsx   |   6 +-
 .../account/AccountPortfolioChart.tsx         |   2 +-
 src/components/balances/BalancesTable.tsx     |   8 +-
 src/hooks/usePaginatedResource.ts             | 115 +++---------------
 src/hooks/useResource.ts                      | 101 +++++----------
 src/hooks/useUsdRates.ts                      |   5 +-
 src/model/fetchOptions.ts                     |  12 +-
 src/model/resource.ts                         |   1 -
 src/screens/account.tsx                       |   7 +-
 src/screens/block.tsx                         |   5 +-
 src/screens/network.tsx                       |   5 +-
 14 files changed, 130 insertions(+), 196 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2e86601d..8197ac31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
         "rollbar": "^2.26.1",
+        "swr": "^2.2.4",
         "ts-custom-error": "^3.3.1",
         "typescript": "^4.9.5",
         "web-vitals": "^3.3.0"
@@ -12593,6 +12594,11 @@
         "@colors/colors": "1.5.0"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/clipboardy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
@@ -25164,6 +25170,18 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -25868,6 +25886,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/utf-8-validate": {
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
@@ -36118,6 +36144,11 @@
         "string-width": "^4.2.0"
       }
     },
+    "client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "clipboardy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-3.0.0.tgz",
@@ -45153,6 +45184,15 @@
         }
       }
     },
+    "swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "requires": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -45682,6 +45722,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "utf-8-validate": {
       "version": "5.0.9",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.9.tgz",
diff --git a/package.json b/package.json
index 128c9c69..9ab89428 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "rollbar": "^2.26.1",
+    "swr": "^2.2.4",
     "ts-custom-error": "^3.3.1",
     "typescript": "^4.9.5",
     "web-vitals": "^3.3.0"
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index f00a2ee8..2ff564f8 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -62,14 +62,14 @@ const SortProperties = {
 	RESERVED: (balance: AccountBalanceWithUsdRate) => balanceSort(balance, "reserved")
 };
 
-export type AccountBalanceOverview = {
+export type AccountBalancesTable = {
 	balances: Resource<AccountBalance[]>;
 	usdRates: Resource<UsdRates>;
 }
 
-const AccountBalancesTableAttribute = ItemsTableAttribute<AccountBalance, SortProperty<AccountBalance>, [UsdRates]>;
+const AccountBalancesTableAttribute = ItemsTableAttribute<AccountBalance, SortProperty<AccountBalance>, [UsdRates|undefined]>;
 
-export const AccountBalancesTable = (props: AccountBalanceOverview) => {
+export const AccountBalancesTable = (props: AccountBalancesTable) => {
 	const { balances, usdRates } = props;
 
 	const [sort, setSort] = useState<SortOrder<SortProperty<AccountBalanceWithUsdRate>>>({
@@ -170,7 +170,7 @@ export const AccountBalancesTable = (props: AccountBalanceOverview) => {
 									amount={balance.balance.total}
 									currency={balance.network.symbol}
 									decimalPlaces="optimal"
-									usdRate={usdRates[balance.network.name]}
+									usdRate={usdRates?.[balance.network.name]}
 									showFullInTooltip
 									showUsdValue
 									data-test={`${balance.network.name}-balance-total`}
@@ -203,7 +203,7 @@ export const AccountBalancesTable = (props: AccountBalanceOverview) => {
 							amount={balance.balance.free}
 							currency={balance.network.symbol}
 							decimalPlaces="optimal"
-							usdRate={usdRates[balance.network.name]}
+							usdRate={usdRates?.[balance.network.name]}
 							showFullInTooltip
 							showUsdValue
 							data-test={`${balance.network.name}-balance-free`}
@@ -222,7 +222,7 @@ export const AccountBalancesTable = (props: AccountBalanceOverview) => {
 							amount={balance.balance.reserved}
 							currency={balance.network.symbol}
 							decimalPlaces="optimal"
-							usdRate={usdRates[balance.network.name]}
+							usdRate={usdRates?.[balance.network.name]}
 							showFullInTooltip
 							showUsdValue
 							data-test={`${balance.network.name}-balance-reserved`}
diff --git a/src/components/account/AccountPortfolio.tsx b/src/components/account/AccountPortfolio.tsx
index 68c139c5..b2934f04 100644
--- a/src/components/account/AccountPortfolio.tsx
+++ b/src/components/account/AccountPortfolio.tsx
@@ -112,7 +112,11 @@ export const AccountPortfolio = (props: AccountPortfolioProps) => {
 	}
 
 	if (balances.notFound || stats.total.eq(0)) {
-		return <NotFound css={notFoundStyle}>No positive balances with conversion rate to USD found</NotFound>;
+		return (
+			<NotFound css={notFoundStyle}>
+				No positive balances with conversion rate to USD found
+			</NotFound>
+		);
 	}
 
 	if (balances.error) {
diff --git a/src/components/account/AccountPortfolioChart.tsx b/src/components/account/AccountPortfolioChart.tsx
index 8a18c88f..1a6e5b28 100644
--- a/src/components/account/AccountPortfolioChart.tsx
+++ b/src/components/account/AccountPortfolioChart.tsx
@@ -54,7 +54,7 @@ export enum AccountPortfolioChartMode {
 
 export type AccountPortfolioChartProps = HTMLAttributes<HTMLDivElement> & {
 	balances: AccountBalance[];
-	usdRates: UsdRates;
+	usdRates?: UsdRates;
 	mode: AccountPortfolioChartMode;
 };
 
diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
index 1dc1fc59..475b7aa6 100644
--- a/src/components/balances/BalancesTable.tsx
+++ b/src/components/balances/BalancesTable.tsx
@@ -16,7 +16,7 @@ export type BalancesTableProps = {
 	usdRates: Resource<UsdRates>;
 };
 
-const BalancesItemsTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates]>;
+const BalancesItemsTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates|undefined]>;
 
 function BalancesTable(props: BalancesTableProps) {
 	const { network, balances, usdRates } = props;
@@ -50,7 +50,7 @@ function BalancesTable(props: BalancesTableProps) {
 						amount={balance.total}
 						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network.name]}
+						usdRate={usdRates?.[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
@@ -64,7 +64,7 @@ function BalancesTable(props: BalancesTableProps) {
 						amount={balance.free}
 						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network.name]}
+						usdRate={usdRates?.[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
@@ -78,7 +78,7 @@ function BalancesTable(props: BalancesTableProps) {
 						amount={balance.reserved}
 						currency={network.symbol}
 						decimalPlaces="optimal"
-						usdRate={usdRates[network.name]}
+						usdRate={usdRates?.[network.name]}
 						showFullInTooltip
 						showUsdValue
 					/>
diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index 2fc0e462..8136d9c9 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -1,111 +1,36 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useRollbar } from "@rollbar/react";
+import { useMemo } from "react";
 
 import { FetchOptions } from "../model/fetchOptions";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginatedResource } from "../model/paginatedResource";
 import { PaginationOptions } from "../model/paginationOptions";
-import { DataError } from "../utils/error";
 
 import { usePagination } from "./usePagination";
-
-type PaginatedResourceProps<T> = Omit<PaginatedResource<T>, "notFound" | "pagination" | "refetch">;
-
-const defaultResourceProps = {
-	data: [],
-	totalCount: undefined,
-	loading: true,
-	error: undefined,
-};
+import { useResource } from "./useResource";
 
 export function usePaginatedResource<T = any, F extends any[] = any[]>(
 	fetchItems: (...args: [...F, PaginationOptions]) => ItemsResponse<T>|Promise<ItemsResponse<T>>,
 	args: F,
-	options?: FetchOptions
+	options: FetchOptions = {}
 ) {
-	const rollbar = useRollbar();
-
-	const fetchRequestKey = useMemo(() => JSON.stringify(args), [JSON.stringify(args)]);
-	const previousFetchRequestKeyRef = useRef<string>();
-
-	const [resourceProps, setResourceProps] = useState<PaginatedResourceProps<T>>(defaultResourceProps);
-
 	const pagination = usePagination();
 
-	const fetchData = useCallback(async () => {
-		if (options?.waitUntil) {
-			// wait until all required condition are met
-			return;
+	const resource = useResource(fetchItems, [...args, {
+		limit: pagination.limit,
+		offset: pagination.offset
+	}], {
+		...options,
+		onSuccess: (data) => {
+			data && pagination.set(data.pagination);
 		}
-
-		if (!options?.skip) {
-			try {
-				const items = await fetchItems(...args, {
-					limit: pagination.limit,
-					offset: pagination.offset,
-				});
-
-				setResourceProps((props) => ({
-					...props,
-					data: items.data,
-					totalCount: items.totalCount
-				}));
-
-				pagination.set(items.pagination);
-			} catch(error) {
-				if (error instanceof DataError) {
-					rollbar.error(error);
-					setResourceProps((props) => ({
-						...props,
-						error
-					}));
-				} else {
-					throw error;
-				}
-			}
-		}
-
-		setResourceProps((props) => ({
-			...props,
-			loading: false
-		}));
-	}, [
-		fetchItems,
-		fetchRequestKey,
-		pagination.limit,
-		pagination.offset,
-		options?.skip,
-	]);
-
-	useEffect(() => {
-		setResourceProps((props) => ({
-			...props,
-			data: [],
-			error: undefined,
-			loading: true
-		}));
-		fetchData();
-	}, [fetchData]);
-
-	return useMemo<PaginatedResource<T>>(
-		() => {
-			if (previousFetchRequestKeyRef.current && previousFetchRequestKeyRef.current !== fetchRequestKey) {
-				// do not return old data if the fetch args changed
-				return ({
-					...defaultResourceProps,
-					notFound: false,
-					pagination,
-					refetch: fetchData
-				});
-			}
-
-			return ({
-				...resourceProps,
-				notFound: !resourceProps.loading && !resourceProps.error && (!resourceProps.data || resourceProps.data.length === 0),
-				pagination,
-				refetch: fetchData
-			});
-		},
-		[fetchRequestKey, resourceProps, pagination, fetchData]
-	);
+	});
+
+	return useMemo<PaginatedResource<T>>(() => ({
+		data: resource.data?.data,
+		totalCount: resource.data?.totalCount,
+		loading: resource.loading,
+		notFound: resource.notFound || resource.data?.data.length === 0,
+		error: resource.error,
+		pagination,
+	}), [resource, pagination]);
 }
diff --git a/src/hooks/useResource.ts b/src/hooks/useResource.ts
index addf07c5..cc144c76 100644
--- a/src/hooks/useResource.ts
+++ b/src/hooks/useResource.ts
@@ -1,93 +1,52 @@
+import { useEffect, useMemo } from "react";
+import useSwr from "swr";
 import { useRollbar } from "@rollbar/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { FetchOptions } from "../model/fetchOptions";
 import { Resource } from "../model/resource";
 import { DataError } from "../utils/error";
 
-type ResourceProps<T> = Omit<Resource<T>, "notFound" | "refetch">;
-
-const defaultResourceProps = {
-	data: undefined,
-	loading: true,
-	error: undefined,
-};
-
 export function useResource<T = any, F extends any[] = any[]>(
 	fetchItem: (...args: F) => T|undefined|Promise<T|undefined>,
 	args: F,
-	options?: FetchOptions
+	options: FetchOptions = {}
 ) {
 	const rollbar = useRollbar();
 
-	const fetchRequestKey = useMemo(() => JSON.stringify(args), [JSON.stringify(args)]);
-	const previousFetchRequestKeyRef = useRef<string>();
+	const {skip, ...swrOptions} = options;
+
+	const swrKey = !skip
+		? [fetchItem, args]
+		: null;
 
-	const [resourceProps, setResourceProps] = useState<ResourceProps<T>>(defaultResourceProps);
+	const {data, isLoading, error} = useSwr(swrKey, swrFetcher, swrOptions);
 
-	const fetchData = useCallback(async () => {
-		if (options?.waitUntil) {
-			// wait until all required condition are met
+	useEffect(() => {
+		if (!error) {
 			return;
 		}
 
-		if (!options?.skip) {
-			try {
-				const data = await fetchItem(...args);
-				setResourceProps((props) => ({
-					...props,
-					data
-				}));
-			} catch(error) {
-				if (error instanceof DataError) {
-					rollbar.error(error);
-					setResourceProps((props) => ({
-						...props,
-						error: error
-					}));
-				} else {
-					throw error;
-				}
-			}
+		if (error && error instanceof DataError) {
+			rollbar.error(error);
+		} else {
+			throw error;
 		}
+	}, [error]);
+
+	return useMemo<Resource<T>>(() => ({
+		data,
+		loading: isLoading,
+		error,
+		notFound: !isLoading && !error && !data,
+	}), [data, isLoading, error]);
+}
 
-		setResourceProps((props) => ({
-			...props,
-			loading: false
-		}));
-	}, [fetchItem, fetchRequestKey, options?.waitUntil, options?.skip]);
-
-	useEffect(() => {
-		setResourceProps((props) => ({
-			...props,
-			data: undefined,
-			error: undefined,
-			loading: true
-		}));
-		fetchData();
-	}, [fetchData]);
+/*** PRIVATE ***/
 
-	useEffect(() => {
-		previousFetchRequestKeyRef.current = fetchRequestKey;
-	}, [fetchRequestKey]);
+type DataFetcher<T, F extends any[]> = (...args: F) => T|undefined|Promise<T|undefined>;
 
-	return useMemo<Resource<T>>(
-		() => {
-			if (previousFetchRequestKeyRef.current && previousFetchRequestKeyRef.current !== fetchRequestKey) {
-				// do not return old data if the fetch args changed
-				return ({
-					...defaultResourceProps,
-					notFound: false,
-					refetch: fetchData
-				});
-			}
-
-			return ({
-				...resourceProps,
-				notFound: !resourceProps.loading && !resourceProps.error && !resourceProps.data,
-				refetch: fetchData
-			});
-		},
-		[fetchRequestKey, resourceProps, fetchData]
-	);
+function swrFetcher<T = any, F extends any[] = any[]>(
+	[fetchItem, args]: [DataFetcher<T, F>, F],
+) {
+	return fetchItem(...args);
 }
diff --git a/src/hooks/useUsdRates.ts b/src/hooks/useUsdRates.ts
index 6750e46e..b7b4dba5 100644
--- a/src/hooks/useUsdRates.ts
+++ b/src/hooks/useUsdRates.ts
@@ -10,13 +10,14 @@ export function useUsdRates(
 ) {
 	const usdRates = useResource(getUsdRates, [], options);
 
-	useEffect(() => {
+	// TODO
+	/*useEffect(() => {
 		if (usdRates.data) {
 			const nextRefetchAt = getUsdRatesUpdatedAt() + USD_RATES_REFRESH_RATE;
 			const timeout = setTimeout(usdRates.refetch, Math.max(0, nextRefetchAt - Date.now()));
 			return () => clearTimeout(timeout);
 		}
-	}, [usdRates]);
+	}, [usdRates]);*/
 
 	return usdRates;
 }
diff --git a/src/model/fetchOptions.ts b/src/model/fetchOptions.ts
index bbe6886d..4a6e6420 100644
--- a/src/model/fetchOptions.ts
+++ b/src/model/fetchOptions.ts
@@ -1,12 +1,6 @@
-export type FetchOptions = {
-	/**
-	 * Use this if you need to wait before fetch
-	 * until some condition is true.
-	 *
-	 * Loading status is on until that.
-	 */
-	waitUntil?: boolean;
+import { SWRConfiguration } from "swr";
 
+export interface FetchOptions extends SWRConfiguration {
 	/**
 	 * Use this if the data are not needed based on some condition.
 	 *
@@ -14,4 +8,4 @@ export type FetchOptions = {
 	 * performed and results with "Not found".
 	 */
 	skip?: boolean;
-};
+}
diff --git a/src/model/resource.ts b/src/model/resource.ts
index 12497eef..eeb18c0e 100644
--- a/src/model/resource.ts
+++ b/src/model/resource.ts
@@ -3,5 +3,4 @@ export type Resource<T = any> = {
 	loading: boolean;
 	notFound: boolean;
 	error?: any;
-	refetch: () => Promise<any>;
 }
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index 961f05ae..afbe4c90 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -94,14 +94,17 @@ export const AccountPage = () => {
 
 	const usdRates = useUsdRates();
 
+	console.log("USD RATES", usdRates.loading, {...usdRates});
+
 	useDOMEventTrigger("data-loaded", !account.loading && !extrinsics.loading && !calls.loading && !transfers.loading && !usdRates.loading);
 
-	useEffect(() => {
+	// TODO
+	/*useEffect(() => {
 		if (extrinsics.pagination.offset === 0) {
 			const interval = setInterval(extrinsics.refetch, 3000);
 			return () => clearInterval(interval);
 		}
-	}, [extrinsics]);
+	}, [extrinsics]);*/
 
 	return (
 		<>
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index dd5b5991..7bdad4a6 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -35,12 +35,13 @@ export const BlockPage = () => {
 
 	useDOMEventTrigger("data-loaded", !block.loading && !extrinsics.loading && !events.loading && !calls.loading);
 
-	useEffect(() => {
+	// TODO
+	/*useEffect(() => {
 		if (extrinsics.pagination.offset === 0) {
 			const interval = setInterval(extrinsics.refetch, 3000);
 			return () => clearInterval(interval);
 		}
-	}, [extrinsics]);
+	}, [extrinsics]);*/
 
 	return (
 		<>
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 41f3cf69..1f6688dd 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -51,12 +51,13 @@ export const NetworkPage = () => {
 
 	useDOMEventTrigger("data-loaded", !extrinsics.loading && !blocks.loading && !transfers.loading && !topHolders.loading && !usdRates.loading);
 
-	useEffect(() => {
+	// TODO
+	/*useEffect(() => {
 		if (extrinsics.pagination.offset === 0) {
 			const interval = setInterval(extrinsics.refetch, 3000);
 			return () => clearInterval(interval);
 		}
-	}, [extrinsics]);
+	}, [extrinsics]);*/
 
 	return (
 		<>

From 93e4bf3adad6cae82bbcecf1fde9610bd7127474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Wed, 25 Oct 2023 16:43:59 +0200
Subject: [PATCH 09/21] refactor pagination to use URL query parameter and use
 page & pageSize instead of offset & limit

---
 src/components/ItemsTable.tsx                 | 21 ++++--
 src/components/TablePagination.tsx            | 33 +++++----
 .../account/AccountBalancesTable.tsx          | 46 ++++++------
 src/components/balances/BalancesTable.tsx     |  6 +-
 src/components/blocks/BlocksTable.tsx         |  5 +-
 src/components/calls/CallsTable.tsx           |  6 +-
 src/components/events/EventsTable.tsx         |  6 +-
 src/components/extrinsics/ExtrinsicsTable.tsx |  5 +-
 src/components/search/SearchResultsTable.tsx  |  3 +-
 src/components/transfers/TransfersTable.tsx   |  5 +-
 src/hooks/useAccount.ts                       |  5 +-
 src/hooks/useAccountBalances.ts               |  5 +-
 src/hooks/useBalances.ts                      | 10 ++-
 src/hooks/useBlock.ts                         |  5 +-
 src/hooks/useBlocks.ts                        | 10 ++-
 src/hooks/useCall.ts                          |  5 +-
 src/hooks/useCalls.ts                         | 10 ++-
 src/hooks/useEvent.ts                         |  5 +-
 src/hooks/useEvents.ts                        |  8 +--
 src/hooks/useEventsByName.ts                  |  5 +-
 src/hooks/useExtrinsic.ts                     |  5 +-
 src/hooks/useExtrinsics.ts                    |  8 +--
 src/hooks/useExtrinsicsByName.ts              |  5 +-
 src/hooks/useExtrinsicsWithoutTotalCount.ts   |  8 +--
 src/hooks/usePage.ts                          | 24 +++++++
 src/hooks/usePaginatedResource.ts             | 30 ++++----
 src/hooks/usePagination.ts                    | 59 ---------------
 src/hooks/useResource.ts                      | 28 ++++++--
 src/hooks/useRootLoaderData.ts                |  2 +-
 src/hooks/useRuntimeMetadataPallets.ts        |  5 +-
 src/hooks/useRuntimeSpecVersions.ts           |  5 +-
 src/hooks/useSearch.ts                        |  5 +-
 src/hooks/useStats.ts                         |  6 +-
 src/hooks/{useTabParam.ts => useTab.ts}       |  6 +-
 src/hooks/useTransfers.ts                     |  8 +--
 src/hooks/useUsdRates.ts                      | 10 ++-
 src/model/fetchOptions.ts                     | 11 ---
 src/model/itemsResponse.ts                    |  8 +--
 src/model/pageInfo.ts                         |  5 ++
 src/model/paginatedResource.ts                |  5 +-
 src/model/paginationOptions.ts                |  4 +-
 src/model/resource.ts                         |  3 +
 ...{root-loader-data.ts => rootLoaderData.ts} |  0
 src/screens/account.tsx                       | 71 +++++++++++++------
 src/screens/block.tsx                         | 58 ++++++++++-----
 src/screens/call.tsx                          | 20 ++++--
 src/screens/extrinsic.tsx                     | 28 ++++++--
 src/screens/network.tsx                       | 56 ++++++++++-----
 src/screens/search.tsx                        |  4 +-
 src/services/balancesService.ts               | 18 ++---
 src/services/blocksService.ts                 | 14 ++--
 src/services/callsService.ts                  | 14 ++--
 src/services/eventsService.ts                 | 16 ++---
 src/services/extrinsicsService.ts             | 14 ++--
 src/services/searchService.ts                 | 33 ++++-----
 src/services/transfersService.ts              | 18 ++---
 src/utils/items-response.ts                   | 11 ---
 ...tConnectionItems.ts => itemsConnection.ts} | 21 +++++-
 src/utils/itemsResponse.ts                    | 13 ++++
 59 files changed, 477 insertions(+), 386 deletions(-)
 create mode 100644 src/hooks/usePage.ts
 delete mode 100644 src/hooks/usePagination.ts
 rename src/hooks/{useTabParam.ts => useTab.ts} (79%)
 delete mode 100644 src/model/fetchOptions.ts
 create mode 100644 src/model/pageInfo.ts
 rename src/model/{root-loader-data.ts => rootLoaderData.ts} (100%)
 delete mode 100644 src/utils/items-response.ts
 rename src/utils/{extractConnectionItems.ts => itemsConnection.ts} (57%)
 create mode 100644 src/utils/itemsResponse.ts

diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index 6f117e16..bc38803d 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -3,7 +3,7 @@ import { Children, cloneElement, HTMLAttributes, ReactElement, ReactNode } from
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import { css, Interpolation, Theme } from "@emotion/react";
 
-import { Pagination } from "../hooks/usePagination";
+import { PageInfo } from "../model/pageInfo";
 import { SortDirection } from "../model/sortDirection";
 import { SortOrder } from "../model/sortOrder";
 
@@ -77,6 +77,7 @@ export const ItemsTableAttribute = <T extends object = any, S = any, A extends a
 };
 
 export type ItemsTableProps<T extends ItemsTableItem, S = any, A extends any[] = []> = HTMLAttributes<HTMLDivElement> & {
+	children: ReactElement<ItemsTableAttributeProps<T, A, S>>|(ReactElement<ItemsTableAttributeProps<T, A, S>>|false|undefined|null)[];
 	data?: T[];
 	additionalData?: A;
 	loading?: boolean;
@@ -85,12 +86,13 @@ export type ItemsTableProps<T extends ItemsTableItem, S = any, A extends any[] =
 	error?: any;
 	errorMessage?: string;
 	sort?: SortOrder<any>;
-	pagination?: Pagination;
-	children: ReactElement<ItemsTableAttributeProps<T, A, S>>|(ReactElement<ItemsTableAttributeProps<T, A, S>>|false|undefined|null)[];
+	pageInfo?: PageInfo;
+	onPageChange?: (page: number) => void;
 };
 
 export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] = []>(props: ItemsTableProps<T, S, A>) => {
 	const {
+		children,
 		data,
 		additionalData,
 		loading,
@@ -99,8 +101,8 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		error,
 		errorMessage = "Unexpected error occured while fetching items",
 		sort,
-		pagination,
-		children,
+		pageInfo,
+		onPageChange,
 		...restProps
 	} = props;
 
@@ -171,7 +173,14 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 					</TableBody>
 				</Table>
 			</TableContainer>
-			{pagination && <TablePagination {...pagination} />}
+			{pageInfo && (
+				<TablePagination
+					page={pageInfo.page}
+					pageSize={pageInfo.pageSize}
+					hasNextPage={pageInfo.hasNextPage}
+					onPageChange={onPageChange}
+				/>
+			)}
 		</div>
 	);
 };
diff --git a/src/components/TablePagination.tsx b/src/components/TablePagination.tsx
index 191247fd..d3aaea43 100644
--- a/src/components/TablePagination.tsx
+++ b/src/components/TablePagination.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import { ChevronLeft, ChevronRight } from "@mui/icons-material";
+import { useCallback } from "react";
 import { css, IconButton } from "@mui/material";
-
+import { ChevronLeft, ChevronRight } from "@mui/icons-material";
 import { Theme } from "@emotion/react";
 
 const paginationStyle = css`
@@ -30,33 +30,40 @@ const buttonStyle = (theme: Theme) => css`
 `;
 
 export type TablePaginationProps = {
-	offset: number;
-	limit: number;
-	hasNextPage?: boolean;
+	page: number;
+	pageSize: number;
+	hasNextPage: boolean;
 	hideOnSinglePage?: boolean;
-	setPreviousPage: () => void;
-	setNextPage: () => void;
+	onPageChange?: (page: number) => void;
 };
 
 export function TablePagination(props: TablePaginationProps) {
 	const {
-		offset,
+		page,
+		pageSize,
 		hasNextPage = true,
 		hideOnSinglePage = true,
-		setPreviousPage,
-		setNextPage,
+		onPageChange,
 	} = props;
 
-	if (hideOnSinglePage && offset === 0 && !hasNextPage) {
+	if (hideOnSinglePage && page === 1 && !hasNextPage) {
 		return null;
 	}
 
+	const setPreviousPage = useCallback(() => {
+		onPageChange?.(page - 1);
+	}, [page, onPageChange]);
+
+	const setNextPage = useCallback(() => {
+		onPageChange?.(page + 1);
+	}, [page, onPageChange]);
+
 	return (
 		<div css={paginationStyle}>
-			<IconButton css={buttonStyle} disabled={offset === 0} onClick={() => setPreviousPage()}>
+			<IconButton css={buttonStyle} disabled={page === 1} onClick={setPreviousPage}>
 				<ChevronLeft />
 			</IconButton>
-			<IconButton css={buttonStyle} disabled={!hasNextPage} onClick={() => setNextPage()}>
+			<IconButton css={buttonStyle} disabled={!hasNextPage} onClick={setNextPage}>
 				<ChevronRight />
 			</IconButton>
 		</div>
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index 2ff564f8..cd6c2e11 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Alert } from "@mui/material";
 import { css } from "@emotion/react";
 import Decimal from "decimal.js";
 
-import { usePagination } from "../../hooks/usePagination";
 import { AccountBalance } from "../../model/accountBalance";
+import { PaginationOptions } from "../../model/paginationOptions";
+import { Resource } from "../../model/resource";
 import { SortDirection } from "../../model/sortDirection";
 import { SortOrder } from "../../model/sortOrder";
 import { SortProperty } from "../../model/sortProperty";
-import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
+
 import { compareProps } from "../../utils/compare";
 
 import { AccountAddress } from "../AccountAddress";
@@ -62,23 +63,23 @@ const SortProperties = {
 	RESERVED: (balance: AccountBalanceWithUsdRate) => balanceSort(balance, "reserved")
 };
 
-export type AccountBalancesTable = {
+export type AccountBalancesTableProps = {
 	balances: Resource<AccountBalance[]>;
 	usdRates: Resource<UsdRates>;
+	pagination: PaginationOptions;
+	onPageChange?: (page: number) => void;
 }
 
 const AccountBalancesTableAttribute = ItemsTableAttribute<AccountBalance, SortProperty<AccountBalance>, [UsdRates|undefined]>;
 
-export const AccountBalancesTable = (props: AccountBalancesTable) => {
-	const { balances, usdRates } = props;
+export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
+	const { balances, usdRates, pagination, onPageChange } = props;
 
 	const [sort, setSort] = useState<SortOrder<SortProperty<AccountBalanceWithUsdRate>>>({
 		property: SortProperties.TOTAL,
 		direction: SortDirection.DESC
 	});
 
-	const pagination = usePagination();
-
 	const data = useMemo(() => {
 		return balances.data
 			?.map(it => ({
@@ -92,26 +93,20 @@ export const AccountBalancesTable = (props: AccountBalancesTable) => {
 	}, [balances, usdRates, sort]);
 
 	const pageData = useMemo(() => {
-		return data?.slice(pagination.offset, pagination.offset + pagination.limit);
-	}, [data, pagination.offset, pagination.limit]);
-
-	useEffect(() => {
-		if (data) {
-			pagination.set({
-				...pagination,
-				hasNextPage: pagination.offset + pagination.limit < data.length
-			});
-		}
-	}, [data, pagination.offset, pagination.limit]);
+		return data?.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize);
+	}, [data, pagination.page, pagination.pageSize]);
+
+	const pageInfo = useMemo(() => ({
+		page: pagination.page,
+		pageSize: pagination.pageSize,
+		hasNextPage: pagination.page * pagination.pageSize < data.length
+	}), [data, pagination]);
 
 	const handleSortSelected = useCallback((value: SortOrder<SortProperty<AccountBalance>>) => {
 		console.log("set sort", value);
 		setSort(value);
-		pagination.set({
-			...pagination,
-			offset: 0
-		});
-	}, [pagination]);
+		onPageChange?.(0);
+	}, [onPageChange]);
 
 	return (
 		<div>
@@ -120,7 +115,8 @@ export const AccountBalancesTable = (props: AccountBalancesTable) => {
 				additionalData={[usdRates.data]}
 				loading={balances.loading || usdRates.loading}
 				error={balances.error}
-				pagination={pagination}
+				pageInfo={pageInfo}
+				onPageChange={onPageChange}
 				sort={sort}
 				data-test="account-balances-table"
 			>
diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
index 475b7aa6..c4ecd7ac 100644
--- a/src/components/balances/BalancesTable.tsx
+++ b/src/components/balances/BalancesTable.tsx
@@ -14,12 +14,13 @@ export type BalancesTableProps = {
 	network: Network;
 	balances: PaginatedResource<Balance>;
 	usdRates: Resource<UsdRates>;
+	onPageChange?: (page: number) => void;
 };
 
 const BalancesItemsTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates|undefined]>;
 
 function BalancesTable(props: BalancesTableProps) {
-	const { network, balances, usdRates } = props;
+	const { network, balances, usdRates, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -29,7 +30,8 @@ function BalancesTable(props: BalancesTableProps) {
 			notFound={balances.notFound}
 			notFoundMessage="No balances found"
 			error={balances.error}
-			pagination={balances.pagination}
+			pageInfo={balances.pageInfo}
+			onPageChange={onPageChange}
 			data-test="balances-table"
 		>
 			<BalancesItemsTableAttribute
diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
index 0cbc0800..dbc00d9a 100644
--- a/src/components/blocks/BlocksTable.tsx
+++ b/src/components/blocks/BlocksTable.tsx
@@ -12,6 +12,7 @@ export type BlocksTableProps = {
 	blocks: PaginatedResource<Block>,
 	showValidator: boolean,
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const BlocksTableAttribute = ItemsTableAttribute<Block>;
@@ -22,6 +23,7 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 		blocks,
 		showValidator,
 		showTime,
+		onPageChange
 	} = props;
 
 	return (
@@ -31,7 +33,8 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			notFound={blocks.notFound}
 			notFoundMessage="No blocks found"
 			error={blocks.error}
-			pagination={blocks.pagination}
+			pageInfo={blocks.pageInfo}
+			onPageChange={onPageChange}
 			data-test="blocks-table"
 		>
 			<BlocksTableAttribute
diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
index 8ff2c626..ced6a7fd 100644
--- a/src/components/calls/CallsTable.tsx
+++ b/src/components/calls/CallsTable.tsx
@@ -11,12 +11,13 @@ export type CallsTableProps = {
 	network: Network;
 	calls: PaginatedResource<Call>;
 	showAccount?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const CallsTableAttribute = ItemsTableAttribute<Call>;
 
 export const CallsTable = (props: CallsTableProps) => {
-	const { network, calls, showAccount } = props;
+	const { network, calls, showAccount, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -25,7 +26,8 @@ export const CallsTable = (props: CallsTableProps) => {
 			notFound={calls.notFound}
 			notFoundMessage="No calls found"
 			error={calls.error}
-			pagination={calls.pagination}
+			pageInfo={calls.pageInfo}
+			onPageChange={onPageChange}
 			data-test="calls-table"
 		>
 			<CallsTableAttribute
diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
index 6ee9bfe9..48906e96 100644
--- a/src/components/events/EventsTable.tsx
+++ b/src/components/events/EventsTable.tsx
@@ -18,12 +18,13 @@ export type EventsTableProps = {
 	network: Network;
 	events: PaginatedResource<Event>;
 	showExtrinsic?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const EventsItemsTableAttribute = ItemsTableAttribute<Event>;
 
 function EventsTable(props: EventsTableProps) {
-	const { network, events, showExtrinsic } = props;
+	const { network, events, showExtrinsic, onPageChange } = props;
 
 	return (
 		<ItemsTable
@@ -32,7 +33,8 @@ function EventsTable(props: EventsTableProps) {
 			notFound={events.notFound}
 			notFoundMessage="No events found"
 			error={events.error}
-			pagination={events.pagination}
+			pageInfo={events.pageInfo}
+			onPageChange={onPageChange}
 			data-test="events-table"
 		>
 			<EventsItemsTableAttribute
diff --git a/src/components/extrinsics/ExtrinsicsTable.tsx b/src/components/extrinsics/ExtrinsicsTable.tsx
index 852cd95a..b3703bdc 100644
--- a/src/components/extrinsics/ExtrinsicsTable.tsx
+++ b/src/components/extrinsics/ExtrinsicsTable.tsx
@@ -13,6 +13,7 @@ export type ExtrinsicsTableProps = {
 	extrinsics: PaginatedResource<Extrinsic>,
 	showAccount?: boolean;
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const ExtrinsicsTableAttribute = ItemsTableAttribute<Extrinsic>;
@@ -23,6 +24,7 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 		extrinsics,
 		showAccount,
 		showTime,
+		onPageChange
 	} = props;
 
 	return (
@@ -32,7 +34,8 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 			notFound={extrinsics.notFound}
 			notFoundMessage="No extrinsics found"
 			error={extrinsics.error}
-			pagination={extrinsics.pagination}
+			pageInfo={extrinsics.pageInfo}
+			onPageChange={onPageChange}
 			data-test="extrinsics-table"
 		>
 			<ExtrinsicsTableAttribute
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index 104a600d..33bc20a3 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable.tsx
@@ -40,8 +40,9 @@ interface SearchResultsTableProps<T> {
 	children: SearchResultsTableChild<T>|(SearchResultsTableChild<T>|false|undefined|null)[];
 	query: string;
 	results: NetworkSearchResult[];
-	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
 	itemsPlural: string
+	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
+	onPageChange?: (page: number) => void;
 }
 
 export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;
diff --git a/src/components/transfers/TransfersTable.tsx b/src/components/transfers/TransfersTable.tsx
index 59caea3b..b85dc016 100644
--- a/src/components/transfers/TransfersTable.tsx
+++ b/src/components/transfers/TransfersTable.tsx
@@ -17,6 +17,7 @@ export type TransfersTableProps = {
 	network: Network;
 	transfers: PaginatedResource<Transfer>,
 	showTime?: boolean;
+	onPageChange?: (page: number) => void;
 };
 
 const TransfersTableAttribute = ItemsTableAttribute<Transfer>;
@@ -26,6 +27,7 @@ function TransfersTable(props: TransfersTableProps) {
 		network,
 		transfers,
 		showTime,
+		onPageChange
 	} = props;
 
 	console.log(transfers);
@@ -37,7 +39,8 @@ function TransfersTable(props: TransfersTableProps) {
 			notFound={transfers.notFound}
 			notFoundMessage="No transfers found"
 			error={transfers.error}
-			pagination={transfers.pagination}
+			pageInfo={transfers.pageInfo}
+			onPageChange={onPageChange}
 			data-test="transfers-table"
 		>
 			<TransfersTableAttribute
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index b3dad1c7..44967287 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getAccount } from "../services/accountService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useAccount(
 	network: string,
 	address: string,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getAccount, [network, address], options);
 }
diff --git a/src/hooks/useAccountBalances.ts b/src/hooks/useAccountBalances.ts
index 94edcf5a..f7121bc7 100644
--- a/src/hooks/useAccountBalances.ts
+++ b/src/hooks/useAccountBalances.ts
@@ -1,11 +1,10 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getAccountBalances } from "../services/balancesService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useAccountBalances(
 	address: string,
-	options?: FetchOptions,
+	options?: UseResourceOptions,
 ) {
 	return useResource(getAccountBalances, [address], options);
 }
diff --git a/src/hooks/useBalances.ts b/src/hooks/useBalances.ts
index 2fc20c73..e034e79c 100644
--- a/src/hooks/useBalances.ts
+++ b/src/hooks/useBalances.ts
@@ -1,12 +1,10 @@
-import { FetchOptions } from "../model/fetchOptions";
-import { BalancesFilter, BalancesOrder, getBalances } from "../services/balancesService";
-import { usePaginatedResource } from "./usePaginatedResource";
+import { BalancesFilter, getBalances } from "../services/balancesService";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useBalances(
 	network: string,
 	filter: BalancesFilter | undefined,
-	order?: BalancesOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getBalances, [network, filter, order], options);
+	return usePaginatedResource(getBalances, [network, filter, options?.order], options);
 }
diff --git a/src/hooks/useBlock.ts b/src/hooks/useBlock.ts
index 93a4cda3..bb5bc1ff 100644
--- a/src/hooks/useBlock.ts
+++ b/src/hooks/useBlock.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { BlocksFilter, getBlock } from "../services/blocksService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useBlock(
 	network: string,
 	filter: BlocksFilter,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getBlock, [network, filter], options);
 }
diff --git a/src/hooks/useBlocks.ts b/src/hooks/useBlocks.ts
index a7562d64..974c8f70 100644
--- a/src/hooks/useBlocks.ts
+++ b/src/hooks/useBlocks.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
-import { BlocksFilter, BlocksOrder, getBlocks } from "../services/blocksService";
+import { BlocksFilter, getBlocks } from "../services/blocksService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useBlocks(
 	network: string,
 	filter: BlocksFilter | undefined,
-	order?: BlocksOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getBlocks, [network, filter, order], options);
+	return usePaginatedResource(getBlocks, [network, filter, options?.order], options);
 }
diff --git a/src/hooks/useCall.ts b/src/hooks/useCall.ts
index 7c495608..4b45e282 100644
--- a/src/hooks/useCall.ts
+++ b/src/hooks/useCall.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { CallsFilter, getCall } from "../services/callsService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useCall(
 	network: string,
 	filter: CallsFilter,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getCall, [network, filter], options);
 }
diff --git a/src/hooks/useCalls.ts b/src/hooks/useCalls.ts
index c758ef77..d713a582 100644
--- a/src/hooks/useCalls.ts
+++ b/src/hooks/useCalls.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
-import { CallsFilter, CallsOrder, getCalls } from "../services/callsService";
+import { CallsFilter, getCalls } from "../services/callsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useCalls(
 	network: string,
 	filter: CallsFilter,
-	order?: CallsOrder,
-	options?: FetchOptions,
+	options?: UsePaginatedResourceOptions,
 ) {
-	return usePaginatedResource(getCalls, [network, filter, order], options);
+	return usePaginatedResource(getCalls, [network, filter, options?.order], options);
 }
diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts
index 81dfc09a..484fa763 100644
--- a/src/hooks/useEvent.ts
+++ b/src/hooks/useEvent.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { EventsFilter, getEvent } from "../services/eventsService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useEvent(
 	network: string,
 	filter: EventsFilter,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getEvent, [network, filter], options);
 }
diff --git a/src/hooks/useEvents.ts b/src/hooks/useEvents.ts
index 9782edb7..0742be2b 100644
--- a/src/hooks/useEvents.ts
+++ b/src/hooks/useEvents.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { EventsFilter, EventsOrder, getEvents } from "../services/eventsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useEvents(
 	network: string,
 	filter: EventsFilter,
-	order?: EventsOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getEvents, [network, filter, order], options);
+	return usePaginatedResource(getEvents, [network, filter, options?.order], options);
 }
diff --git a/src/hooks/useEventsByName.ts b/src/hooks/useEventsByName.ts
index d533d44d..f2bc5b72 100644
--- a/src/hooks/useEventsByName.ts
+++ b/src/hooks/useEventsByName.ts
@@ -1,13 +1,12 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { EventsOrder, getEventsByName } from "../services/eventsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useEventsByName(
 	network: string,
 	name: string,
 	order?: EventsOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
 	return usePaginatedResource(getEventsByName, [network, name, order], options);
 }
diff --git a/src/hooks/useExtrinsic.ts b/src/hooks/useExtrinsic.ts
index ac63c124..decae71c 100644
--- a/src/hooks/useExtrinsic.ts
+++ b/src/hooks/useExtrinsic.ts
@@ -1,12 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { ExtrinsicsFilter, getExtrinsic } from "../services/extrinsicsService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useExtrinsic(
 	network: string,
 	filter: ExtrinsicsFilter,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getExtrinsic, [network, filter], options);
 }
diff --git a/src/hooks/useExtrinsics.ts b/src/hooks/useExtrinsics.ts
index 95a493fc..ad164d8d 100644
--- a/src/hooks/useExtrinsics.ts
+++ b/src/hooks/useExtrinsics.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { ExtrinsicsFilter, ExtrinsicsOrder, getExtrinsics } from "../services/extrinsicsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useExtrinsics(
 	network: string,
 	filter: ExtrinsicsFilter,
-	order?: ExtrinsicsOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getExtrinsics, [network, filter, order, true], options);
+	return usePaginatedResource(getExtrinsics, [network, filter, options?.order, true], options);
 }
diff --git a/src/hooks/useExtrinsicsByName.ts b/src/hooks/useExtrinsicsByName.ts
index 74fd1727..085e6711 100644
--- a/src/hooks/useExtrinsicsByName.ts
+++ b/src/hooks/useExtrinsicsByName.ts
@@ -1,13 +1,12 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { ExtrinsicsOrder, getExtrinsicsByName } from "../services/extrinsicsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useExtrinsicsByName(
 	network: string,
 	name: string,
 	order?: ExtrinsicsOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
 	return usePaginatedResource(getExtrinsicsByName, [network, name, order], options);
 }
diff --git a/src/hooks/useExtrinsicsWithoutTotalCount.ts b/src/hooks/useExtrinsicsWithoutTotalCount.ts
index 051fc740..b1a46b09 100644
--- a/src/hooks/useExtrinsicsWithoutTotalCount.ts
+++ b/src/hooks/useExtrinsicsWithoutTotalCount.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { ExtrinsicsFilter, ExtrinsicsOrder, getExtrinsics } from "../services/extrinsicsService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
 
 export function useExtrinsicsWithoutTotalCount(
 	network: string,
 	filter: ExtrinsicsFilter|undefined,
-	order?: ExtrinsicsOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getExtrinsics, [network, filter, order, false], options);
+	return usePaginatedResource(getExtrinsics, [network, filter, options?.order, false], options);
 }
diff --git a/src/hooks/usePage.ts b/src/hooks/usePage.ts
new file mode 100644
index 00000000..73bc77d1
--- /dev/null
+++ b/src/hooks/usePage.ts
@@ -0,0 +1,24 @@
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export function usePage() {
+	const [qs, setQs] = useSearchParams();
+
+	const page = parseInt(qs.get("page") || "1");
+
+	const setPage = useCallback((page: number) => {
+		console.log("set page", page);
+		if (page === 1) {
+			qs.delete("page");
+		} else {
+			qs.set("page", page.toString());
+		}
+
+		setQs(qs);
+	}, [qs]);
+
+	return useMemo(
+		() => [page, setPage] as const,
+		[page, setPage]
+	);
+}
diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index 8136d9c9..f56a3950 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -1,28 +1,27 @@
 import { useMemo } from "react";
 
-import { FetchOptions } from "../model/fetchOptions";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginatedResource } from "../model/paginatedResource";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { usePagination } from "./usePagination";
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
+
+export interface UsePaginatedResourceOptions<O = string> extends UseResourceOptions {
+	order?: O;
+	page?: number;
+	refreshFirstPage?: boolean;
+}
 
 export function usePaginatedResource<T = any, F extends any[] = any[]>(
 	fetchItems: (...args: [...F, PaginationOptions]) => ItemsResponse<T>|Promise<ItemsResponse<T>>,
 	args: F,
-	options: FetchOptions = {}
+	options: UsePaginatedResourceOptions = {}
 ) {
-	const pagination = usePagination();
+	const {page = 1, refresh, refreshFirstPage, ...restOptions} = options;
 
-	const resource = useResource(fetchItems, [...args, {
-		limit: pagination.limit,
-		offset: pagination.offset
-	}], {
-		...options,
-		onSuccess: (data) => {
-			data && pagination.set(data.pagination);
-		}
+	const resource = useResource(fetchItems, [...args, { page, pageSize: 10 }], {
+		...restOptions,
+		refresh: refresh || (refreshFirstPage && page === 1)
 	});
 
 	return useMemo<PaginatedResource<T>>(() => ({
@@ -31,6 +30,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 		loading: resource.loading,
 		notFound: resource.notFound || resource.data?.data.length === 0,
 		error: resource.error,
-		pagination,
-	}), [resource, pagination]);
+		pageInfo: resource.data?.pageInfo,
+		refetch: resource.refetch
+	}), [resource]);
 }
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
deleted file mode 100644
index 9cc9da79..00000000
--- a/src/hooks/usePagination.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-export type PaginationState = {
-	limit: number;
-	offset: number;
-	hasNextPage: boolean;
-};
-
-export type Pagination = PaginationState & {
-	set: (pagination: Partial<PaginationState>) => void;
-	setPreviousPage: () => void;
-	setNextPage: () => void;
-};
-
-export type UsePaginationProps = {
-	limit?: number;
-};
-
-export function usePagination(limit = 10) {
-	const [state, setState] = useState<PaginationState>({
-		limit,
-		offset: 0,
-		hasNextPage: false,
-	});
-
-	const setPreviousPage = useCallback(() => {
-		if (state.offset === 0) {
-			return;
-		}
-		setState({
-			...state,
-			offset: state.offset - state.limit,
-		});
-	}, [state]);
-
-	const setNextPage = useCallback(() => {
-		setState({
-			...state,
-			offset: state.offset + state.limit,
-		});
-	}, [state]);
-
-	const set = useCallback((newState: Partial<Pagination>) => {
-		setState({
-			...state,
-			...newState
-		});
-	}, [state]);
-
-	return useMemo(
-		() => ({
-			...state,
-			set,
-			setPreviousPage,
-			setNextPage,
-		} as Pagination),
-		[state, setPreviousPage, setNextPage, setState]
-	);
-}
diff --git a/src/hooks/useResource.ts b/src/hooks/useResource.ts
index cc144c76..b3eb2963 100644
--- a/src/hooks/useResource.ts
+++ b/src/hooks/useResource.ts
@@ -1,25 +1,42 @@
 import { useEffect, useMemo } from "react";
-import useSwr from "swr";
+import useSwr, { SWRConfiguration } from "swr";
 import { useRollbar } from "@rollbar/react";
 
-import { FetchOptions } from "../model/fetchOptions";
 import { Resource } from "../model/resource";
 import { DataError } from "../utils/error";
 
+export interface UseResourceOptions extends SWRConfiguration {
+	/**
+	 * Use this if the data are not needed based on some condition.
+	 *
+	 * Behaves like normal except the data fetch is not actually
+	 * performed and results with "Not found".
+	 */
+	skip?: boolean;
+
+	/**
+	 * Refetch data in regular interval specified by `refreshInterval` (default 3000ms)
+	 */
+	refresh?: boolean;
+}
+
 export function useResource<T = any, F extends any[] = any[]>(
 	fetchItem: (...args: F) => T|undefined|Promise<T|undefined>,
 	args: F,
-	options: FetchOptions = {}
+	options: UseResourceOptions = {}
 ) {
 	const rollbar = useRollbar();
 
-	const {skip, ...swrOptions} = options;
+	const {skip, refresh, refreshInterval = 3000, ...swrOptions} = options;
 
 	const swrKey = !skip
 		? [fetchItem, args]
 		: null;
 
-	const {data, isLoading, error} = useSwr(swrKey, swrFetcher, swrOptions);
+	const {data, isLoading, error, mutate} = useSwr(swrKey, swrFetcher, {
+		...swrOptions,
+		refreshInterval: refresh ? refreshInterval : undefined,
+	});
 
 	useEffect(() => {
 		if (!error) {
@@ -38,6 +55,7 @@ export function useResource<T = any, F extends any[] = any[]>(
 		loading: isLoading,
 		error,
 		notFound: !isLoading && !error && !data,
+		refetch: mutate
 	}), [data, isLoading, error]);
 }
 
diff --git a/src/hooks/useRootLoaderData.ts b/src/hooks/useRootLoaderData.ts
index 07ed5e2e..40f0ddfe 100644
--- a/src/hooks/useRootLoaderData.ts
+++ b/src/hooks/useRootLoaderData.ts
@@ -1,6 +1,6 @@
 import { useRouteLoaderData } from "react-router";
 
-import { NetworkLoaderData } from "../model/root-loader-data";
+import { NetworkLoaderData } from "../model/rootLoaderData";
 
 export function useNetworkLoaderData() {
 	return useRouteLoaderData("network") as NetworkLoaderData;
diff --git a/src/hooks/useRuntimeMetadataPallets.ts b/src/hooks/useRuntimeMetadataPallets.ts
index b62b315e..ecfcc9a0 100644
--- a/src/hooks/useRuntimeMetadataPallets.ts
+++ b/src/hooks/useRuntimeMetadataPallets.ts
@@ -1,14 +1,13 @@
 import { useCallback } from "react";
 
-import { FetchOptions } from "../model/fetchOptions";
 import { getPalletsRuntimeMetadata } from "../services/runtimeMetadataService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useRuntimeMetadataPallets(
 	network?: string | undefined,
 	specVersion?: number | undefined,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(
 		useCallback(async (network?: string, specVersion?: number) => {
diff --git a/src/hooks/useRuntimeSpecVersions.ts b/src/hooks/useRuntimeSpecVersions.ts
index 5b1fa9f7..e6478c08 100644
--- a/src/hooks/useRuntimeSpecVersions.ts
+++ b/src/hooks/useRuntimeSpecVersions.ts
@@ -1,11 +1,10 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getRuntimeSpecVersions } from "../services/runtimeSpecService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useRuntimeSpecVersions(
 	network: string,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getRuntimeSpecVersions, [network], options);
 }
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
index e6bf88f6..c870ed6d 100644
--- a/src/hooks/useSearch.ts
+++ b/src/hooks/useSearch.ts
@@ -1,13 +1,12 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { Network } from "../model/network";
 import { search } from "../services/searchService";
 
-import { useResource } from "./useResource";
+import { UseResourceOptions, useResource } from "./useResource";
 
 export function useSearch(
 	query: string,
 	networks?: Network[],
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(search, [query, networks], options);
 }
diff --git a/src/hooks/useStats.ts b/src/hooks/useStats.ts
index 930c248b..660684e4 100644
--- a/src/hooks/useStats.ts
+++ b/src/hooks/useStats.ts
@@ -1,12 +1,12 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getStats, StatsFilter, StatsOrder } from "../services/statsService";
-import { useResource } from "./useResource";
+
+import { useResource, UseResourceOptions } from "./useResource";
 
 export function useStats(
 	network: string,
 	filter: StatsFilter|undefined,
 	order?: StatsOrder|undefined,
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	return useResource(getStats, [network, filter, order], options);
 }
diff --git a/src/hooks/useTabParam.ts b/src/hooks/useTab.ts
similarity index 79%
rename from src/hooks/useTabParam.ts
rename to src/hooks/useTab.ts
index e05215db..08fd5d9b 100644
--- a/src/hooks/useTabParam.ts
+++ b/src/hooks/useTab.ts
@@ -6,15 +6,15 @@ export type UseTabParamOptions = {
 	preserveQueryParams?: string[];
 }
 
-export function useTabParam(options: UseTabParamOptions = {}) {
+export function useTab<T extends string>(options: UseTabParamOptions = {}) {
 	const [qs] = useSearchParams();
 	const params = useParams();
 
 	const navigate = useNavigate();
 
-	const currentTab = params[options.paramName || "tab"];
+	const currentTab = params[options.paramName || "tab"] as T;
 
-	const setTab = useCallback((newTab: string) => {
+	const setTab = useCallback((newTab: T) => {
 		const path = currentTab ? `./../${newTab}` : newTab;
 		const newQs = new URLSearchParams();
 
diff --git a/src/hooks/useTransfers.ts b/src/hooks/useTransfers.ts
index a2997893..fd92fe90 100644
--- a/src/hooks/useTransfers.ts
+++ b/src/hooks/useTransfers.ts
@@ -1,13 +1,11 @@
-import { FetchOptions } from "../model/fetchOptions";
 import { getTransfers, TransfersFilter, TransfersOrder } from "../services/transfersService";
 
-import { usePaginatedResource } from "./usePaginatedResource";
+import { usePaginatedResource, UsePaginatedResourceOptions } from "./usePaginatedResource";
 
 export function useTransfers(
 	network: string,
 	filter: TransfersFilter | undefined,
-	order?: TransfersOrder,
-	options?: FetchOptions
+	options?: UsePaginatedResourceOptions
 ) {
-	return usePaginatedResource(getTransfers, [network, filter, order], options);
+	return usePaginatedResource(getTransfers, [network, filter, options?.order], options);
 }
diff --git a/src/hooks/useUsdRates.ts b/src/hooks/useUsdRates.ts
index b7b4dba5..8fba012e 100644
--- a/src/hooks/useUsdRates.ts
+++ b/src/hooks/useUsdRates.ts
@@ -1,23 +1,21 @@
 import { useEffect } from "react";
 
-import { FetchOptions } from "../model/fetchOptions";
 import { getUsdRates, getUsdRatesUpdatedAt, USD_RATES_REFRESH_RATE } from "../services/usdRatesService";
 
-import { useResource } from "./useResource";
+import { useResource, UseResourceOptions } from "./useResource";
 
 export function useUsdRates(
-	options?: FetchOptions
+	options?: UseResourceOptions
 ) {
 	const usdRates = useResource(getUsdRates, [], options);
 
-	// TODO
-	/*useEffect(() => {
+	useEffect(() => {
 		if (usdRates.data) {
 			const nextRefetchAt = getUsdRatesUpdatedAt() + USD_RATES_REFRESH_RATE;
 			const timeout = setTimeout(usdRates.refetch, Math.max(0, nextRefetchAt - Date.now()));
 			return () => clearTimeout(timeout);
 		}
-	}, [usdRates]);*/
+	}, [usdRates]);
 
 	return usdRates;
 }
diff --git a/src/model/fetchOptions.ts b/src/model/fetchOptions.ts
deleted file mode 100644
index 4a6e6420..00000000
--- a/src/model/fetchOptions.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { SWRConfiguration } from "swr";
-
-export interface FetchOptions extends SWRConfiguration {
-	/**
-	 * Use this if the data are not needed based on some condition.
-	 *
-	 * Behaves like normal except the data fetch is not actually
-	 * performed and results with "Not found".
-	 */
-	skip?: boolean;
-}
diff --git a/src/model/itemsResponse.ts b/src/model/itemsResponse.ts
index bb57c8b1..0e4bf8df 100644
--- a/src/model/itemsResponse.ts
+++ b/src/model/itemsResponse.ts
@@ -1,10 +1,8 @@
+import { PageInfo } from "./pageInfo";
+
 export type ItemsResponse<T = any, C extends boolean = false> = {
 	data: T[];
-	pagination: {
-		offset: number;
-		limit: number;
-		hasNextPage: boolean;
-	},
+	pageInfo: PageInfo;
 	totalCount?: number;
 } & (C extends true ? {
 	totalCount: number;
diff --git a/src/model/pageInfo.ts b/src/model/pageInfo.ts
new file mode 100644
index 00000000..eff3ee32
--- /dev/null
+++ b/src/model/pageInfo.ts
@@ -0,0 +1,5 @@
+export type PageInfo = {
+	page: number;
+	pageSize: number;
+	hasNextPage: boolean;
+}
diff --git a/src/model/paginatedResource.ts b/src/model/paginatedResource.ts
index 1d771525..0a8abdcd 100644
--- a/src/model/paginatedResource.ts
+++ b/src/model/paginatedResource.ts
@@ -1,8 +1,7 @@
-import { Pagination } from "../hooks/usePagination";
-
+import { PageInfo } from "./pageInfo";
 import { Resource } from "./resource";
 
 export type PaginatedResource<T = any> = Resource<T[]> & {
-	pagination: Pagination
+	pageInfo?: PageInfo,
 	totalCount?: number;
 }
diff --git a/src/model/paginationOptions.ts b/src/model/paginationOptions.ts
index 06016598..eebac6a6 100644
--- a/src/model/paginationOptions.ts
+++ b/src/model/paginationOptions.ts
@@ -1,4 +1,4 @@
 export type PaginationOptions = {
-	offset: number;
-	limit: number;
+	page: number;
+	pageSize: number;
 }
diff --git a/src/model/resource.ts b/src/model/resource.ts
index eeb18c0e..430da8f2 100644
--- a/src/model/resource.ts
+++ b/src/model/resource.ts
@@ -1,6 +1,9 @@
+import { KeyedMutator } from "swr";
+
 export type Resource<T = any> = {
 	data?: T;
 	loading: boolean;
 	notFound: boolean;
 	error?: any;
+	refetch: KeyedMutator<any>;
 }
diff --git a/src/model/root-loader-data.ts b/src/model/rootLoaderData.ts
similarity index 100%
rename from src/model/root-loader-data.ts
rename to src/model/rootLoaderData.ts
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index afbe4c90..2d2b983f 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -1,5 +1,4 @@
 /** @jsxImportSource @emotion/react */
-import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { Tooltip } from "@mui/material";
 import { InfoOutlined } from "@mui/icons-material";
@@ -21,12 +20,13 @@ import { useAccountBalances } from "../hooks/useAccountBalances";
 import { useCalls } from "../hooks/useCalls";
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useExtrinsics } from "../hooks/useExtrinsics";
-import { useUsdRates } from "../hooks/useUsdRates";
-import { useTransfers } from "../hooks/useTransfers";
+import { usePage } from "../hooks/usePage";
 import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
+import { useTab } from "../hooks/useTab";
+import { useTransfers } from "../hooks/useTransfers";
+import { useUsdRates } from "../hooks/useUsdRates";
 
 import { hasSupport } from "../services/networksService";
-import { useTabParam } from "../hooks/useTabParam";
 
 const accountInfoStyle = css`
 	display: flex;
@@ -84,13 +84,28 @@ export type AccountPageParams = {
 export const AccountPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { address } = useParams() as AccountPageParams;
-	const [tab, setTab] = useTabParam();
+
+	const [tab, setTab] = useTab();
+	const [page, setPage] = usePage();
 
 	const account = useAccount(network.name, address);
-	const balances = useAccountBalances(address);
-	const extrinsics = useExtrinsics(network.name, { signerAddress_eq: address });
-	const calls = useCalls(network.name, { callerAddress_eq: address });
-	const transfers = useTransfers(network.name, { accountAddress_eq: address });
+
+	const balances = useAccountBalances(address, { refresh: true });
+
+	const extrinsics = useExtrinsics(network.name, { signerAddress_eq: address }, {
+		page: tab === "extrinsics" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const calls = useCalls(network.name, { callerAddress_eq: address }, {
+		page: tab === "calls" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const transfers = useTransfers(network.name, { accountAddress_eq: address }, {
+		page: tab === "transfers" ? page : 1,
+		refreshFirstPage: true
+	});
 
 	const usdRates = useUsdRates();
 
@@ -98,14 +113,6 @@ export const AccountPage = () => {
 
 	useDOMEventTrigger("data-loaded", !account.loading && !extrinsics.loading && !calls.loading && !transfers.loading && !usdRates.loading);
 
-	// TODO
-	/*useEffect(() => {
-		if (extrinsics.pagination.offset === 0) {
-			const interval = setInterval(extrinsics.refetch, 3000);
-			return () => clearInterval(interval);
-		}
-	}, [extrinsics]);*/
-
 	return (
 		<>
 			<CardRow>
@@ -160,7 +167,15 @@ export const AccountPage = () => {
 							error={balances.error}
 							value="balances"
 						>
-							<AccountBalancesTable balances={balances} usdRates={usdRates} />
+							<AccountBalancesTable
+								balances={balances}
+								usdRates={usdRates}
+								pagination={{
+									page,
+									pageSize: 10 // TODO constant
+								}}
+								onPageChange={setPage}
+							/>
 						</TabPane>
 						<TabPane
 							label="Extrinsics"
@@ -169,7 +184,12 @@ export const AccountPage = () => {
 							error={extrinsics.error}
 							value="extrinsics"
 						>
-							<ExtrinsicsTable network={network} extrinsics={extrinsics} showTime />
+							<ExtrinsicsTable
+								network={network}
+								extrinsics={extrinsics}
+								showTime
+								onPageChange={setPage}
+							/>
 						</TabPane>
 						{hasSupport(network.name, "explorer-squid") &&
 							<TabPane
@@ -179,7 +199,11 @@ export const AccountPage = () => {
 								error={calls.error}
 								value="calls"
 							>
-								<CallsTable network={network} calls={calls} />
+								<CallsTable
+									network={network}
+									calls={calls}
+									onPageChange={setPage}
+								/>
 							</TabPane>
 						}
 						{hasSupport(network.name, "main-squid") &&
@@ -190,7 +214,12 @@ export const AccountPage = () => {
 								error={transfers.error}
 								value="transfers"
 							>
-								<TransfersTable network={network} transfers={transfers} showTime />
+								<TransfersTable
+									network={network}
+									transfers={transfers}
+									showTime
+									onPageChange={setPage}
+								/>
 							</TabPane>
 						}
 					</TabbedContent>
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 7bdad4a6..0dc75b23 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -1,20 +1,21 @@
-import { useCallback, useEffect } from "react";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import { BlockInfoTable } from "../components/blocks/BlockInfoTable";
 import { CallsTable } from "../components/calls/CallsTable";
 import { Card, CardHeader } from "../components/Card";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
+import EventsTable from "../components/events/EventsTable";
 import ExtrinsicsTable from "../components/extrinsics/ExtrinsicsTable";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
-import EventsTable from "../components/events/EventsTable";
+
 import { useBlock } from "../hooks/useBlock";
 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 { useTabParam } from "../hooks/useTabParam";
+import { usePage } from "../hooks/usePage";
+import { useTab } from "../hooks/useTab";
 
 export type BlockPageParams = {
 	id: string;
@@ -25,23 +26,27 @@ export const BlockPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as BlockPageParams;
 
-	const [tab, setTab] = useTabParam();
+	const [tab, setTab] = useTab();
+	const [page, setPage] = usePage();
 
 	const block = useBlock(network.name, { id_eq: id });
 
-	const extrinsics = useExtrinsics(network.name, { blockId_eq: id }, "id_DESC");
-	const events = useEvents(network.name, { blockId_eq: id }, "id_DESC");
-	const calls = useCalls(network.name, { blockId_eq: id }, "id_DESC");
+	const extrinsics = useExtrinsics(network.name, { blockId_eq: id }, {
+		page: tab === "extrinsics" ? page : 1,
+		refreshFirstPage: true
+	});
 
-	useDOMEventTrigger("data-loaded", !block.loading && !extrinsics.loading && !events.loading && !calls.loading);
+	const events = useEvents(network.name, { blockId_eq: id }, {
+		page: tab === "events" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const calls = useCalls(network.name, { blockId_eq: id }, {
+		page: tab === "calls" ? page : 1,
+		refreshFirstPage: true
+	});
 
-	// TODO
-	/*useEffect(() => {
-		if (extrinsics.pagination.offset === 0) {
-			const interval = setInterval(extrinsics.refetch, 3000);
-			return () => clearInterval(interval);
-		}
-	}, [extrinsics]);*/
+	useDOMEventTrigger("data-loaded", !block.loading && !extrinsics.loading && !events.loading && !calls.loading);
 
 	return (
 		<>
@@ -65,7 +70,12 @@ export const BlockPage = () => {
 							error={extrinsics.error}
 							value="extrinsics"
 						>
-							<ExtrinsicsTable network={network} extrinsics={extrinsics} showAccount />
+							<ExtrinsicsTable
+								network={network}
+								extrinsics={extrinsics}
+								showAccount
+								onPageChange={setPage}
+							/>
 						</TabPane>
 						<TabPane
 							label="Calls"
@@ -74,7 +84,12 @@ export const BlockPage = () => {
 							error={calls.error}
 							value="calls"
 						>
-							<CallsTable network={network} calls={calls} showAccount />
+							<CallsTable
+								network={network}
+								calls={calls}
+								showAccount
+								onPageChange={setPage}
+							/>
 						</TabPane>
 						<TabPane
 							label="Events"
@@ -83,7 +98,12 @@ export const BlockPage = () => {
 							error={events.error}
 							value="events"
 						>
-							<EventsTable network={network} events={events} showExtrinsic />
+							<EventsTable
+								network={network}
+								events={events}
+								showExtrinsic
+								onPageChange={setPage}
+							/>
 						</TabPane>
 					</TabbedContent>
 				</Card>
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index 65071a13..2bc30f6f 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -5,11 +5,13 @@ import { CallInfoTable } from "../components/calls/CallInfoTable";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import EventsTable from "../components/events/EventsTable";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
+
 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 { useTabParam } from "../hooks/useTabParam";
+import { useTab } from "../hooks/useTab";
 
 export type CallPageParams = {
 	id: string;
@@ -18,10 +20,16 @@ export type CallPageParams = {
 export const CallPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as CallPageParams;
-	const [tab, setTab] = useTabParam();
+
+	const [tab, setTab] = useTab();
+	const [page, setPage] = usePage();
 
 	const call = useCall(network.name, { id_eq: id });
-	const events = useEvents(network.name, { callId_eq: id }, "id_ASC");
+
+	const events = useEvents(network.name, { callId_eq: id }, {
+		order: "id_ASC",
+		page: tab === "events" ? page : 1
+	});
 
 	useDOMEventTrigger("data-loaded", !call.loading && !events.loading);
 
@@ -44,7 +52,11 @@ export const CallPage = () => {
 							error={events.error}
 							value="events"
 						>
-							<EventsTable network={network} events={events} />
+							<EventsTable
+								network={network}
+								events={events}
+								onPageChange={setPage}
+							/>
 						</TabPane>
 					</TabbedContent>
 				</Card>
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index e7a8cd17..ccc303dd 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -7,12 +7,14 @@ import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import EventsTable from "../components/events/EventsTable";
 import { ExtrinsicInfoTable } from "../components/extrinsics/ExtrinsicInfoTable";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
+
 import { useCalls } from "../hooks/useCalls";
 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 { useTabParam } from "../hooks/useTabParam";
+import { useTab } from "../hooks/useTab";
 
 type ExtrinsicPageParams = {
 	id: string;
@@ -21,11 +23,21 @@ type ExtrinsicPageParams = {
 export const ExtrinsicPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as ExtrinsicPageParams;
-	const [tab, setTab] = useTabParam();
+
+	const [tab, setTab] = useTab();
+	const [page, setPage] = usePage();
 
 	const extrinsic = useExtrinsic(network.name, { id_eq: id });
-	const events = useEvents(network.name, { extrinsicId_eq: id }, "id_ASC");
-	const calls = useCalls(network.name, { extrinsicId_eq: id }, "id_ASC");
+
+	const events = useEvents(network.name, { extrinsicId_eq: id }, {
+		order: "id_ASC",
+		page: tab === "events" ? page : 1
+	});
+
+	const calls = useCalls(network.name, { extrinsicId_eq: id }, {
+		order: "id_ASC",
+		page: tab === "calls" ? page : 1
+	});
 
 	useDOMEventTrigger("data-loaded", !extrinsic.loading && !events.loading && !calls.loading);
 
@@ -54,6 +66,7 @@ export const ExtrinsicPage = () => {
 							<EventsTable
 								network={network}
 								events={events}
+								onPageChange={setPage}
 							/>
 						</TabPane>
 						<TabPane
@@ -63,7 +76,12 @@ export const ExtrinsicPage = () => {
 							error={calls.error}
 							value="calls"
 						>
-							<CallsTable network={network} calls={calls} showAccount />
+							<CallsTable
+								network={network}
+								calls={calls}
+								showAccount
+								onPageChange={setPage}
+							/>
 						</TabPane>
 					</TabbedContent>
 				</Card>
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 1f6688dd..1116ccd4 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -1,25 +1,27 @@
 /** @jsxImportSource @emotion/react */
-import { useEffect } from "react";
 import { Theme, css } from "@emotion/react";
 
-import ExtrinsicsTable from "../components/extrinsics/ExtrinsicsTable";
+import BalancesTable from "../components/balances/BalancesTable";
+import BlocksTable from "../components/blocks/BlocksTable";
 import { Card, CardHeader, CardRow } from "../components/Card";
-import { useExtrinsicsWithoutTotalCount } from "../hooks/useExtrinsicsWithoutTotalCount";
-import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
+import ExtrinsicsTable from "../components/extrinsics/ExtrinsicsTable";
+import { NetworkStats } from "../components/network/NetworkStats";
+import { NetworkTokenDistribution } from "../components/network/NetworkTokenDistribution";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
-import { useTransfers } from "../hooks/useTransfers";
 import TransfersTable from "../components/transfers/TransfersTable";
-import { hasSupport } from "../services/networksService";
-import { useBlocks } from "../hooks/useBlocks";
-import BlocksTable from "../components/blocks/BlocksTable";
+
 import { useBalances } from "../hooks/useBalances";
-import BalancesTable from "../components/balances/BalancesTable";
+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 { useStats } from "../hooks/useStats";
-import { NetworkStats } from "../components/network/NetworkStats";
+import { useTab } from "../hooks/useTab";
+import { useTransfers } from "../hooks/useTransfers";
 import { useUsdRates } from "../hooks/useUsdRates";
-import { useNetworkLoaderData } from "../hooks/useRootLoaderData";
-import { NetworkTokenDistribution } from "../components/network/NetworkTokenDistribution";
-import { useTabParam } from "../hooks/useTabParam";
+
+import { hasSupport } from "../services/networksService";
 
 const networkIconStyle = css`
 	vertical-align: text-bottom;
@@ -38,12 +40,30 @@ const tokenDistributionStyle = (theme: Theme) => css`
 
 export const NetworkPage = () => {
 	const { network } = useNetworkLoaderData();
-	const [tab, setTab] = useTabParam();
 
-	const extrinsics = useExtrinsicsWithoutTotalCount(network.name, undefined, "id_DESC");
-	const blocks = useBlocks(network.name, undefined, "id_DESC");
-	const transfers = useTransfers(network.name, undefined, "id_DESC");
-	const topHolders = useBalances(network.name, undefined, "total_DESC");
+	const [tab, setTab] = useTab();
+	const [page, setPage] = usePage();
+
+	const extrinsics = useExtrinsicsWithoutTotalCount(network.name, undefined, {
+		page: tab === "extrinsics" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const blocks = useBlocks(network.name, undefined, {
+		page: tab === "blocks" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const transfers = useTransfers(network.name, undefined, {
+		page: tab === "transfers" ? page : 1,
+		refreshFirstPage: true
+	});
+
+	const topHolders = useBalances(network.name, undefined, {
+		order: "total_DESC",
+		page: tab === "top-holders" ? page : 1,
+		refreshFirstPage: true
+	});
 
 	const stats = useStats(network.name, undefined);
 
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 5a3bc4c0..ae249f39 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -17,6 +17,7 @@ import { Time } from "../components/Time";
 
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
 import { useSearch } from "../hooks/useSearch";
+import { useTab } from "../hooks/useTab";
 
 import { Account } from "../model/account";
 import { Block } from "../model/block";
@@ -27,7 +28,6 @@ import { getNetworks } from "../services/networksService";
 import { NetworkSearchResult } from "../services/searchService";
 
 import { encodeAddress } from "../utils/address";
-import { useTabParam } from "../hooks/useTabParam";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -57,7 +57,7 @@ export const SearchPage = () => {
 	const query = qs.get("query") || "";
 	const networkNames = qs.getAll("network");
 
-	const [tab, setTab] = useTabParam({
+	const [tab, setTab] = useTab({
 		preserveQueryParams: ["query", "network"]
 	});
 
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index d9a50fec..21ddfdf0 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -6,8 +6,8 @@ import { StatsSquidAccountBalance } from "../model/stats-squid/statsSquidAccount
 import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { encodeAddress } from "../utils/address";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { rawAmountToDecimal } from "../utils/number";
 
 import { fetchStatsSquid } from "./fetchService";
@@ -26,7 +26,7 @@ export async function getBalances(
 	pagination: PaginationOptions,
 ) {
 	if (hasSupport(network, "stats-squid")) {
-		const after = pagination.offset === 0 ? null : pagination.offset.toString();
+		const {first, after} = paginationToConnectionCursor(pagination);
 
 		const response = await fetchStatsSquid<{accountsConnection: ItemsConnection<StatsSquidAccountBalance>}>(
 			network,
@@ -51,26 +51,26 @@ export async function getBalances(
 				}
 			}`,
 			{
-				first: pagination.limit,
+				first,
 				after,
 				filter,
 				order,
 			}
 		);
 
-		const balances = extractConnectionItems(response.accountsConnection, pagination, unifyStatsSquidAccountBalance, network);
+		const balances = extractConnectionItems(response.accountsConnection, unifyStatsSquidAccountBalance, network);
 
 		return balances;
 	}
 
 	return {
 		data: [],
-		pagination: {
-			offset: 0,
-			limit: 0,
+		pageInfo: {
+			page: 1,
+			pageSize: 10, // TODO constant
 			hasNextPage: false,
-			totalCount: 0,
-		}
+		},
+		totalCount: 0,
 	};
 }
 
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index b8bd38b1..0d30eed4 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -4,7 +4,7 @@ import { ExplorerSquidBlock } from "../model/explorer-squid/explorerSquidBlock";
 import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { extractConnectionItems } from "../utils/extractConnectionItems";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { hasSupport } from "./networksService";
@@ -95,7 +95,7 @@ async function getArchiveBlocks(
 	order: BlocksOrder = "id_DESC",
 	pagination: PaginationOptions
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchArchive<{blocksConnection: ItemsConnection<ArchiveBlock>}>(
 		network,
@@ -124,14 +124,14 @@ async function getArchiveBlocks(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: blocksFilterToArchiveFilter(filter),
 			order,
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, pagination, unifyArchiveBlock);
+	const blocks = extractConnectionItems(response.blocksConnection, unifyArchiveBlock);
 
 	return blocks;
 }
@@ -142,7 +142,7 @@ async function getExplorerSquidBlocks(
 	order: BlocksOrder = "id_DESC",
 	pagination: PaginationOptions
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchExplorerSquid<{blocksConnection: ItemsConnection<ExplorerSquidBlock>}>(
 		network,
@@ -169,14 +169,14 @@ async function getExplorerSquidBlocks(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: blocksFilterToExplorerSquidFilter(filter),
 			order,
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, pagination, unifyExplorerSquidBlock);
+	const blocks = extractConnectionItems(response.blocksConnection, unifyExplorerSquidBlock);
 
 	return blocks;
 }
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index 6bcc7cb9..a9430ab1 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -5,8 +5,8 @@ import { Call } from "../model/call";
 import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { decodeAddress } from "../utils/address";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getCallRuntimeMetadata } from "./runtimeMetadataService";
@@ -116,7 +116,7 @@ async function getArchiveCalls(
 	order: CallsOrder = "id_DESC",
 	pagination: PaginationOptions,
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchArchive<{callsConnection: ItemsConnection<ArchiveCall>}>(
 		network,
@@ -157,14 +157,14 @@ async function getArchiveCalls(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: callsFilterToArchiveFilter(filter),
 			order,
 		}
 	);
 
-	return extractConnectionItems(response?.callsConnection, pagination, unifyArchiveCall, network);
+	return extractConnectionItems(response?.callsConnection, unifyArchiveCall, network);
 }
 
 async function getExplorerSquidCalls(
@@ -173,7 +173,7 @@ async function getExplorerSquidCalls(
 	order: CallsOrder = "id_DESC",
 	pagination: PaginationOptions,
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchExplorerSquid<{callsConnection: ItemsConnection<ExplorerSquidCall>}>(
 		network,
@@ -208,14 +208,14 @@ async function getExplorerSquidCalls(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: callsFilterToExplorerSquidFilter(filter),
 			order,
 		}
 	);
 
-	return extractConnectionItems(response.callsConnection, pagination, unifyExplorerSquidCall, network);
+	return extractConnectionItems(response.callsConnection, unifyExplorerSquidCall, network);
 }
 
 async function getArchiveCallsArgs(network: string, callsIds: string[]) {
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index 0ea1bd64..c40f9425 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -7,7 +7,7 @@ import { ItemsCounter } from "../model/itemsCounter";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { extractConnectionItems } from "../utils/extractConnectionItems";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
@@ -67,7 +67,7 @@ export async function getEventsByName(
 		if (countResponse.itemsCounterById === null || countResponse.itemsCounterById.total === 0) {
 			return {
 				data: [],
-				pagination: {
+				pageInfo: {
 					...pagination,
 					hasNextPage: false
 				}
@@ -191,7 +191,7 @@ async function getArchiveEvents(
 	pagination: PaginationOptions,
 	fetchTotalCount = true
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchArchive<{eventsConnection: ItemsConnection<ArchiveEvent>}>(
 		network,
@@ -228,14 +228,14 @@ async function getArchiveEvents(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: eventsFilterToArchiveFilter(filter),
 			order,
 		}
 	);
 
-	return extractConnectionItems(response.eventsConnection, pagination, unifyArchiveEvent, network);
+	return extractConnectionItems(response.eventsConnection, unifyArchiveEvent, network);
 }
 
 async function getExplorerSquidEvents(
@@ -245,7 +245,7 @@ async function getExplorerSquidEvents(
 	pagination: PaginationOptions,
 	fetchTotalCount = true
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchExplorerSquid<{eventsConnection: ItemsConnection<ExplorerSquidEvent>}>(
 		network,
@@ -280,14 +280,14 @@ async function getExplorerSquidEvents(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: eventsFilterToExplorerSquidFilter(filter),
 			order,
 		}
 	);
 
-	const data = await extractConnectionItems(response.eventsConnection, pagination, unifyExplorerSquidEvent, network);
+	const data = await extractConnectionItems(response.eventsConnection, unifyExplorerSquidEvent, network);
 	const events = await addEventsArgs(network, data);
 
 	return events;
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index 775123b0..d0f0c21b 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -6,8 +6,8 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsCounter } from "../model/itemsCounter";
 import { PaginationOptions } from "../model/paginationOptions";
 
-import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { decodeAddress } from "../utils/address";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { lowerFirst, upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
@@ -149,7 +149,7 @@ async function getArchiveExtrinsics(
 	pagination: PaginationOptions,
 	fetchTotalCount = true
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchArchive<{ extrinsicsConnection: ItemsConnection<ArchiveExtrinsic> }>(
 		network,
@@ -191,14 +191,14 @@ async function getArchiveExtrinsics(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: extrinsicFilterToArchiveFilter(filter),
 			order,
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, pagination, unifyArchiveExtrinsic, network);
+	return extractConnectionItems(response.extrinsicsConnection, unifyArchiveExtrinsic, network);
 }
 
 async function getExplorerSquidExtrinsics(
@@ -208,7 +208,7 @@ async function getExplorerSquidExtrinsics(
 	pagination: PaginationOptions,
 	fetchTotalCount = true
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchExplorerSquid<{ extrinsicsConnection: ItemsConnection<ExplorerSquidExtrinsic> }>(
 		network,
@@ -248,14 +248,14 @@ async function getExplorerSquidExtrinsics(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: extrinsicFilterToExplorerSquidFilter(filter),
 			order,
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, pagination, unifyExplorerSquidExtrinsic, network);
+	return extractConnectionItems(response.extrinsicsConnection, unifyExplorerSquidExtrinsic, network);
 }
 
 async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Promise<Extrinsic> {
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index f13b37ba..f8bc43a3 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -1,5 +1,4 @@
 import { isHex } from "@polkadot/util";
-import { isAddress } from "@polkadot/util-crypto";
 
 import { ExplorerSquidBlock } from "../model/explorer-squid/explorerSquidBlock";
 import { ExplorerSquidEvent } from "../model/explorer-squid/explorerSquidEvent";
@@ -13,16 +12,16 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsResponse } from "../model/itemsResponse";
 import { Network } from "../model/network";
 
-import { warningAssert } from "../utils/assert";
-import { extractConnectionItems } from "../utils/extractConnectionItems";
 import { decodeAddress, encodeAddress, isAccountPublicKey, isEncodedAddress } from "../utils/address";
+import { warningAssert } from "../utils/assert";
+import { extractConnectionItems } from "../utils/itemsConnection";
+import { emptyResponse } from "../utils/itemsResponse";
 
-import { BlocksFilter, BlocksOrder, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
-import { EventsFilter, EventsOrder, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
-import { ExtrinsicsFilter, ExtrinsicsOrder, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
+import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
+import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
+import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
 import { fetchExplorerSquid } from "./fetchService";
 import { getNetworks, hasSupport } from "./networksService";
-import { emptyResponse } from "../utils/items-response";
 
 export type ItemId = {
 	id: string;
@@ -67,9 +66,9 @@ export async function search(query: string, networks: Network[] = []): Promise<S
 						address: encodeAddress(query, result.network.prefix),
 						identity: null
 					}],
-					pagination: {
-						offset: 0,
-						limit: 0,
+					pageInfo: {
+						page: 1,
+						pageSize: 10, // TODO constant
 						hasNextPage: false,
 					},
 					totalCount: 1
@@ -197,8 +196,8 @@ async function searchNetworkByHash(network: Network, hash: string) {
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, {offset: 0, limit: 10}, unifyExplorerSquidBlock);
-	const extrinsics = await extractConnectionItems(response.extrinsics, {offset: 0, limit: 10}, unifyExplorerSquidExtrinsic, network.name);
+	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock);
+	const extrinsics = await extractConnectionItems(response.extrinsics, unifyExplorerSquidExtrinsic, network.name);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -250,7 +249,7 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, {offset: 0, limit: 10}, unifyExplorerSquidBlock);
+	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -273,9 +272,9 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 				address: encodedAddress,
 				identity: null
 			}],
-			pagination: {
-				limit: 10,
-				offset: 0,
+			pageInfo: {
+				page: 1,
+				pageSize: 10,
 				hasNextPage: false
 			},
 			totalCount: 1
@@ -419,7 +418,6 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 
 	const extrinsics = await extractConnectionItems(
 		response.extrinsics,
-		{offset: 0, limit: 10},
 		unifyExplorerSquidExtrinsic,
 		network.name
 	);
@@ -428,7 +426,6 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 		network.name,
 		await extractConnectionItems(
 			response.events,
-			{offset: 0, limit: 10},
 			unifyExplorerSquidEvent,
 			network.name
 		)
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index 8260fd38..20be4438 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -5,7 +5,7 @@ import { PaginationOptions } from "../model/paginationOptions";
 import { Transfer } from "../model/transfer";
 
 import { decodeAddress } from "../utils/address";
-import { extractConnectionItems } from "../utils/extractConnectionItems";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { rawAmountToDecimal } from "../utils/number";
 
 import { fetchArchive, fetchMainSquid } from "./fetchService";
@@ -28,12 +28,12 @@ export async function getTransfers(
 
 	return {
 		data: [],
-		pagination: {
-			offset: 0,
-			limit: 0,
+		pageInfo: {
+			page: 1,
+			pageSize: 10, // TODO constant
 			hasNextPage: false,
-			totalCount: 0,
-		}
+		},
+		totalCount: 0,
 	};
 }
 
@@ -45,7 +45,7 @@ async function getMainSquidTransfers(
 	order: TransfersOrder = "id_DESC",
 	pagination: PaginationOptions,
 ) {
-	const after = pagination.offset === 0 ? null : pagination.offset.toString();
+	const {first, after} = paginationToConnectionCursor(pagination);
 
 	const response = await fetchMainSquid<{transfersConnection: ItemsConnection<MainSquidTransfer>}>(
 		network,
@@ -84,14 +84,14 @@ async function getMainSquidTransfers(
 			}
 		}`,
 		{
-			first: pagination.limit,
+			first,
 			after,
 			filter: transfersFilterToMainSquidFilter(filter),
 			order,
 		}
 	);
 
-	const items = await extractConnectionItems(response.transfersConnection, pagination, unifyMainSquidTransfer, network);
+	const items = await extractConnectionItems(response.transfersConnection, unifyMainSquidTransfer, network);
 	const transfers = await addExtrinsicsInfo(network, items);
 
 	return transfers;
diff --git a/src/utils/items-response.ts b/src/utils/items-response.ts
deleted file mode 100644
index cff9db81..00000000
--- a/src/utils/items-response.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function emptyResponse() {
-	return {
-		data: [],
-		pagination: {
-			offset: 0,
-			limit: 0,
-			hasNextPage: false,
-		},
-		totalCount: 0,
-	};
-}
diff --git a/src/utils/extractConnectionItems.ts b/src/utils/itemsConnection.ts
similarity index 57%
rename from src/utils/extractConnectionItems.ts
rename to src/utils/itemsConnection.ts
index b34a9eca..f8888352 100644
--- a/src/utils/extractConnectionItems.ts
+++ b/src/utils/itemsConnection.ts
@@ -2,9 +2,17 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
+export function paginationToConnectionCursor(pagination: PaginationOptions) {
+	const offset = (pagination.page - 1) * pagination.pageSize;
+
+	return {
+		after: offset === 0 ? null : offset.toString(),
+		first: pagination.pageSize
+	};
+}
+
 export async function extractConnectionItems<R = any, T = any, A extends any[] = any[], C extends boolean = false>(
 	connection: ItemsConnection<T, C>,
-	pagination: PaginationOptions,
 	transformNode: (node: T, ...a: A) => R|Promise<R>,
 	...additionalArgs: A
 ): Promise<ItemsResponse<R, C>> {
@@ -14,10 +22,17 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 		data.push(await transformNode(edge.node, ...additionalArgs));
 	}
 
+	const startIndex = parseInt(connection.pageInfo.startCursor) - 1;
+	const endIndex = parseInt(connection.pageInfo.endCursor); // non-inclusive
+
+	const pageSize = (endIndex - startIndex);
+	const page = Math.floor(startIndex / pageSize) + 1;
+
 	return {
 		data,
-		pagination: {
-			...pagination,
+		pageInfo: {
+			page,
+			pageSize,
 			hasNextPage: connection.pageInfo.hasNextPage,
 		},
 		totalCount: connection.totalCount
diff --git a/src/utils/itemsResponse.ts b/src/utils/itemsResponse.ts
new file mode 100644
index 00000000..3adcd46d
--- /dev/null
+++ b/src/utils/itemsResponse.ts
@@ -0,0 +1,13 @@
+import { ItemsResponse } from "../model/itemsResponse";
+
+export function emptyResponse(): ItemsResponse<never> {
+	return {
+		data: [],
+		pageInfo: {
+			page: 1,
+			pageSize: 10, // TODO constant
+			hasNextPage: false,
+		},
+		totalCount: 0,
+	};
+}

From e7f970dd8def14edba7713b8e89f76ee3e2835d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Thu, 26 Oct 2023 15:26:30 +0200
Subject: [PATCH 10/21] search pagination & refactoring

---
 src/components/DataViewer.tsx                 |   2 -
 src/components/TabbedContent.tsx              |  10 +-
 src/components/calls/CallInfoTable.tsx        |   2 +-
 src/components/events/EventInfoTable.tsx      |   2 +-
 src/components/events/EventsTable.tsx         |   2 +-
 .../extrinsics/ExtrinsicInfoTable.tsx         |   2 +-
 .../search/AccountSearchResultsTable.tsx      |  38 +++
 .../search/BlockSearchResultsTable.tsx        |  61 ++++
 .../search/EventSearchResultsTable.tsx        |  81 +++++
 .../search/ExtrinsicSearchResultsTable.tsx    |  69 +++++
 src/components/search/SearchResultsTable.tsx  |  90 ++----
 src/hooks/usePaginatedResource.ts             |   2 +-
 src/hooks/useSearch.ts                        |  15 +-
 src/model/account.ts                          |   2 +
 src/model/block.ts                            |   3 +
 src/model/call.ts                             |   3 +-
 src/model/event.ts                            |   3 +-
 src/model/extrinsic.ts                        |   3 +-
 src/model/searchResult.ts                     |  19 ++
 src/model/searchResultItem.ts                 |   8 +
 src/screens/search.tsx                        | 292 +++++-------------
 src/services/accountService.ts                |   1 +
 src/services/blocksService.ts                 |  20 +-
 src/services/callsService.ts                  |   6 +-
 src/services/eventsService.ts                 |   6 +-
 src/services/extrinsicsService.ts             |   8 +-
 src/services/searchService.ts                 | 254 ++++++++++-----
 src/utils/itemsResponse.ts                    |   2 +-
 src/utils/types.ts                            |   1 +
 29 files changed, 619 insertions(+), 388 deletions(-)
 create mode 100644 src/components/search/AccountSearchResultsTable.tsx
 create mode 100644 src/components/search/BlockSearchResultsTable.tsx
 create mode 100644 src/components/search/EventSearchResultsTable.tsx
 create mode 100644 src/components/search/ExtrinsicSearchResultsTable.tsx
 create mode 100644 src/model/searchResult.ts
 create mode 100644 src/model/searchResultItem.ts
 create mode 100644 src/utils/types.ts

diff --git a/src/components/DataViewer.tsx b/src/components/DataViewer.tsx
index 52ff92bf..fbe46f3f 100644
--- a/src/components/DataViewer.tsx
+++ b/src/components/DataViewer.tsx
@@ -282,5 +282,3 @@ export const DataViewer = (props: DataViewerProps) => {
 		</div>
 	);
 };
-
-export default DataViewer;
diff --git a/src/components/TabbedContent.tsx b/src/components/TabbedContent.tsx
index 8445ef08..1f6f6e67 100644
--- a/src/components/TabbedContent.tsx
+++ b/src/components/TabbedContent.tsx
@@ -54,10 +54,11 @@ const tabLoadingStyle = (theme: Theme) => css`
 
 export type TabPaneProps = Omit<TabProps, "children"> & PropsWithChildren<{
 	label: ReactNode;
+	value: string;
 	count?: number;
 	loading?: boolean;
 	error?: boolean;
-	value: string;
+	hide?: boolean;
 }>
 
 export const TabPane = (props: TabPaneProps) => {
@@ -84,10 +85,15 @@ export const TabbedContent = (props: TabbedContentProps) => {
 			count,
 			loading,
 			error,
+			hide,
 			children, // ignore
 			...restProps
 		} = child.props;
 
+		if (hide && tab !== value) {
+			return null;
+		}
+
 		return (
 			<Tab
 				title=""
@@ -117,7 +123,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 
 	useEffect(() => {
 		if (!currentTabPane) {
-			tabPanes[0] && onTabChange?.(tabPanes[0].props.value);
+			tabHandles[0] && onTabChange?.(tabHandles[0].props.value);
 		}
 	}, [currentTabPane, tabPanes, onTabChange]);
 
diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
index 5d7b6d6e..03b3b3d7 100644
--- a/src/components/calls/CallInfoTable.tsx
+++ b/src/components/calls/CallInfoTable.tsx
@@ -11,7 +11,7 @@ import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";
-import DataViewer from "../DataViewer";
+import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { Link } from "../Link";
 import { Time } from "../Time";
diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx
index bb22e71e..388f71c1 100644
--- a/src/components/events/EventInfoTable.tsx
+++ b/src/components/events/EventInfoTable.tsx
@@ -3,7 +3,7 @@ import { Network } from "../../model/network";
 import { Resource } from "../../model/resource";
 
 import { ButtonLink } from "../ButtonLink";
-import DataViewer from "../DataViewer";
+import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { Link } from "../Link";
 import { Time } from "../Time";
diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
index 48906e96..66d3b2e1 100644
--- a/src/components/events/EventsTable.tsx
+++ b/src/components/events/EventsTable.tsx
@@ -6,7 +6,7 @@ import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
 import { ButtonLink } from "../ButtonLink";
-import DataViewer from "../DataViewer";
+import { DataViewer } from "../DataViewer";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Link } from "../Link";
 
diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx
index c0ca6e74..95afd436 100644
--- a/src/components/extrinsics/ExtrinsicInfoTable.tsx
+++ b/src/components/extrinsics/ExtrinsicInfoTable.tsx
@@ -11,7 +11,7 @@ import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 import { ButtonLink } from "../ButtonLink";
-import DataViewer from "../DataViewer";
+import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
 import { Link } from "../Link";
 import { Time } from "../Time";
diff --git a/src/components/search/AccountSearchResultsTable.tsx b/src/components/search/AccountSearchResultsTable.tsx
new file mode 100644
index 00000000..42a7446e
--- /dev/null
+++ b/src/components/search/AccountSearchResultsTable.tsx
@@ -0,0 +1,38 @@
+import { Account } from "../../model/account";
+import { ItemsResponse } from "../../model/itemsResponse";
+import { SearchResultItem } from "../../model/searchResultItem";
+import { encodeAddress } from "../../utils/address";
+
+import { AccountAddress } from "../AccountAddress";
+
+import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+
+export interface AccountSearchResultsTable {
+	query: string;
+	items: ItemsResponse<SearchResultItem<Account>, true>;
+	onPageChange?: (page: number) => void;
+}
+
+export const AccountSearchResultsTable = (props: AccountSearchResultsTable) => {
+	const {query, items, onPageChange} = props;
+
+	return (
+		<SearchResultsTable<Account>
+			query={query}
+			items={items}
+			itemsPlural="accounts"
+			onPageChange={onPageChange}
+		>
+			<SearchResultsTableItemAttribute<Account>
+				label="Account"
+				render={(account) => (
+					<AccountAddress
+						address={encodeAddress(account.id, account.network.prefix)}
+						network={account.network}
+						copyToClipboard="small"
+					/>
+				)}
+			/>
+		</SearchResultsTable>
+	);
+};
diff --git a/src/components/search/BlockSearchResultsTable.tsx b/src/components/search/BlockSearchResultsTable.tsx
new file mode 100644
index 00000000..4e1fd100
--- /dev/null
+++ b/src/components/search/BlockSearchResultsTable.tsx
@@ -0,0 +1,61 @@
+import { Block } from "../../model/block";
+import { ItemsResponse } from "../../model/itemsResponse";
+import { SearchResultItem } from "../../model/searchResultItem";
+
+import { AccountAddress } from "../AccountAddress";
+import { Link } from "../Link";
+import { Time } from "../Time";
+
+import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+
+export interface BlockSearchResultsTable {
+	query: string;
+	items: ItemsResponse<SearchResultItem<Block>, true>;
+	onPageChange?: (page: number) => void;
+}
+
+export const BlockSearchResultsTable = (props: BlockSearchResultsTable) => {
+	const {query, items, onPageChange} = props;
+
+	return (
+		<SearchResultsTable<Block>
+			query={query}
+			items={items}
+			itemsPlural="blocks"
+			onPageChange={onPageChange}
+		>
+			<SearchResultsTableItemAttribute<Block>
+				label="Block (Height)"
+				render={(block) =>
+					<Link to={`/${block.network.name}/block/${block.id}`}>
+						{block.height}
+					</Link>
+				}
+			/>
+			<SearchResultsTableItemAttribute<Block>
+				label="Spec version"
+				render={(block) =>
+					<>{block.specVersion}</>
+				}
+			/>
+			<SearchResultsTableItemAttribute<Block>
+				label="Validator"
+				render={(block) =>
+					block.validator &&
+						<AccountAddress
+							network={block.network}
+							address={block.validator}
+							shorten
+							copyToClipboard="small"
+						/>
+				}
+			/>
+			<SearchResultsTableItemAttribute<Block>
+				label="Time"
+				render={(block) =>
+					<Time time={block.timestamp} fromNow tooltip utc />
+				}
+			/>
+		</SearchResultsTable>
+	);
+};
diff --git a/src/components/search/EventSearchResultsTable.tsx b/src/components/search/EventSearchResultsTable.tsx
new file mode 100644
index 00000000..3d891dcf
--- /dev/null
+++ b/src/components/search/EventSearchResultsTable.tsx
@@ -0,0 +1,81 @@
+import { css } from "@emotion/react";
+
+import { Event } from "../../model/event";
+import { ItemsResponse } from "../../model/itemsResponse";
+import { SearchResultItem } from "../../model/searchResultItem";
+
+import { ButtonLink } from "../ButtonLink";
+import { DataViewer } from "../DataViewer";
+import { Link } from "../Link";
+
+import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+
+const eventArgsColCss = css`
+	width: 35%;
+`;
+
+export interface EventSearchResultsTable {
+	query: string;
+	items: ItemsResponse<SearchResultItem<Event>, true>;
+	onPageChange?: (page: number) => void;
+}
+
+export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
+	const {query, items, onPageChange} = props;
+
+	return (
+		<SearchResultsTable<Event>
+			query={query}
+			items={items}
+			itemsPlural="events"
+			onPageChange={onPageChange}
+		>
+			<SearchResultsTableItemAttribute<Event>
+				label="Event (ID)"
+				render={(event) => (
+					<Link to={`/${event.network.name}/event/${event.id}`}>
+						{event.id}
+					</Link>
+				)}
+			/>
+			<SearchResultsTableItemAttribute<Event>
+				label="Name"
+				render={(event) => (
+					<ButtonLink
+						to={`/${event.network.name}/search?query=${event.palletName}.${event.eventName}`}
+						size="small"
+						color="secondary"
+					>
+						{event.palletName}.{event.eventName}
+					</ButtonLink>
+				)}
+			/>
+			<SearchResultsTableItemAttribute<Event>
+				label="Extrinsic"
+				render={(event) => (
+					<Link to={`/${event.network.name}/extrinsic/${event.extrinsicId}`}>
+						{event.extrinsicId}
+					</Link>
+				)}
+			/>
+			<SearchResultsTableItemAttribute<Event>
+				label="Parameters"
+				colCss={eventArgsColCss}
+				render={(event) => {
+					if (!event.args) {
+						return null;
+					}
+
+					return (
+						<DataViewer
+							network={event.network}
+							data={event.args}
+							metadata={event.metadata.event?.args}
+							copyToClipboard
+						/>
+					);
+				}}
+			/>
+		</SearchResultsTable>
+	);
+};
diff --git a/src/components/search/ExtrinsicSearchResultsTable.tsx b/src/components/search/ExtrinsicSearchResultsTable.tsx
new file mode 100644
index 00000000..3b6faf7a
--- /dev/null
+++ b/src/components/search/ExtrinsicSearchResultsTable.tsx
@@ -0,0 +1,69 @@
+import { Extrinsic } from "../../model/extrinsic";
+import { ItemsResponse } from "../../model/itemsResponse";
+import { SearchResultItem } from "../../model/searchResultItem";
+
+import { AccountAddress } from "../AccountAddress";
+import { ButtonLink } from "../ButtonLink";
+import { Link } from "../Link";
+import { Time } from "../Time";
+
+import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+
+export interface ExtrinsicSearchResultsTable {
+	query: string;
+	items: ItemsResponse<SearchResultItem<Extrinsic>, true>;
+	onPageChange?: (page: number) => void;
+}
+
+export const ExtrinsicSearchResultsTable = (props: ExtrinsicSearchResultsTable) => {
+	const {query, items, onPageChange} = props;
+
+	return (
+		<SearchResultsTable<Extrinsic>
+			query={query}
+			items={items}
+			itemsPlural="extrinsics"
+			onPageChange={onPageChange}
+		>
+			<SearchResultsTableItemAttribute<Extrinsic>
+				label="Extrinsic (ID)"
+				render={(extrinsic) => (
+					<Link to={`/${extrinsic.network.name}/extrinsic/${extrinsic.id}`}>
+						{extrinsic.id}
+					</Link>
+				)}
+			/>
+			<SearchResultsTableItemAttribute<Extrinsic>
+				label="Name"
+				render={(extrinsic) => (
+					<ButtonLink
+						to={`/${extrinsic.network.name}/search?query=${extrinsic.palletName}.${extrinsic.callName}`}
+						size="small"
+						color="secondary"
+					>
+						{extrinsic.palletName}.{extrinsic.callName}
+					</ButtonLink>
+				)}
+			/>
+			<SearchResultsTableItemAttribute<Extrinsic>
+				label="Account"
+				render={(extrinsic) =>
+					extrinsic.signer && (
+						<AccountAddress
+							network={extrinsic.network}
+							address={extrinsic.signer}
+							shorten
+							copyToClipboard="small"
+						/>
+					)
+				}
+			/>
+			<SearchResultsTableItemAttribute<Extrinsic>
+				label="Time"
+				render={(extrinsic) => (
+					<Time time={extrinsic.timestamp} fromNow tooltip utc />
+				)}
+			/>
+		</SearchResultsTable>
+	);
+};
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index 33bc20a3..daad499d 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable.tsx
@@ -5,11 +5,11 @@ import { css } from "@emotion/react";
 
 import { Network } from "../../model/network";
 import { ItemsResponse } from "../../model/itemsResponse";
-import { NetworkSearchResult } from "../../services/searchService";
 import { formatNumber } from "../../utils/number";
 
 import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps } from "../ItemsTable";
 import { Link } from "../Link";
+import { SearchResultItem } from "../../model/searchResultItem";
 
 const tableStyle = css`
 `;
@@ -36,51 +36,26 @@ const networkIconStyle = css`
 
 type SearchResultsTableChild<T> = ReactElement<ItemsTableAttributeProps<T, [Network], []>>;
 
-interface SearchResultsTableProps<T> {
+
+export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [], []>) => <ItemsTableAttribute {...props} />;
+
+export interface SearchResultsTableProps<T> {
 	children: SearchResultsTableChild<T>|(SearchResultsTableChild<T>|false|undefined|null)[];
 	query: string;
-	results: NetworkSearchResult[];
+	items: ItemsResponse<SearchResultItem<T>, true>;
 	itemsPlural: string
-	getItems: (result: NetworkSearchResult) => ItemsResponse<T>;
 	onPageChange?: (page: number) => void;
 }
 
-export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [Network], []>) => <ItemsTableAttribute {...props} />;
+export const SearchResultsTable = <T extends {id: string, network: Network}>(props: SearchResultsTableProps<T>) => {
+	const { children, query, items, itemsPlural, onPageChange } = props;
 
-interface SearchResultsTableRow<T extends object> {
-	id: string;
-	item: T|undefined;
-	result: NetworkSearchResult;
-	collapsed?: boolean;
-}
+	const data = useMemo(() => items.data.map(it => ({
+		...it,
+		id: `${it.network.name}-${it.data?.id || "grouped"}`
+	})), [items]);
 
-export const SearchResultsTable = <T extends object>(props: SearchResultsTableProps<T>) => {
-	const { children, query, results, getItems, itemsPlural } = props;
-
-	const collapseMultiple = results.length > 1;
-
-	const rows = useMemo(() => {
-		return results.flatMap<SearchResultsTableRow<T>>((result) => {
-			const items = getItems(result);
-
-			if (collapseMultiple && (items.totalCount || items.data.length || 0) > 1) {
-				return [{
-					id: `${result.network.name}-0`,
-					item: undefined,
-					result,
-					collapsed: true
-				}];
-			} else {
-				return items.data.map((it, index) => ({
-					id: `${result.network.name}-${index}`,
-					item: it,
-					result
-				}));
-			}
-		}) || [];
-	}, [collapseMultiple]);
-
-	const itemAttributes = Children.map(children, (child, index) => {
+	const itemAttributes = useMemo(() => Children.map(children, (child, index) => {
 		if (!child) {
 			return null;
 		}
@@ -91,18 +66,18 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 
 		if (index === 0) {
 			return (
-				<ItemsTableAttribute<SearchResultsTableRow<T>>
+				<ItemsTableAttribute<SearchResultItem<T>>
 					label={label}
 					colCss={colCss}
-					colSpan={({result, collapsed}) => (collapsed /* TODO || result.error*/) ? Children.count(children) : 1}
-					render={({item, result, collapsed}) => {
+					colSpan={(item) => (item.groupedCount /* TODO || item.error*/) ? Children.count(children) : 1}
+					render={(item) => {
 						return (
 							<>
-								{item && render(item, result.network)}
-								{collapsed && (
+								{item.data && render(item.data, item.network)}
+								{item.groupedCount && (
 									<Alert severity="warning" icon={false}>
-										{formatNumber(getItems(result).totalCount || 0)} {itemsPlural} found. {" "}
-										<Link to={`/search?query=${query}&network=${result.network.name}`}>
+										{formatNumber(item.groupedCount)} {itemsPlural} found. {" "}
+										<Link to={`/search?query=${query}&network=${item.network.name}`}>
 											View
 										</Link>
 									</Alert>
@@ -122,34 +97,37 @@ export const SearchResultsTable = <T extends object>(props: SearchResultsTablePr
 		}
 
 		return (
-			<ItemsTableAttribute<SearchResultsTableRow<T>>
+			<ItemsTableAttribute<SearchResultItem<T>>
 				label={label}
 				colCss={colCss}
-				render={({item, result}) => {
-					if (!item) {
+				render={(item) => {
+					if (!item.data) {
 						return null;
 					}
 
-					return render(item, result.network);
+					return render(item.data, item.network);
 				}}
-				hide={({result, collapsed}) => collapsed /* TODO || result.error*/}
+				hide={(item) => !!item.groupedCount /* TODO || result.error*/}
 			/>
 		);
-	}) as any;
+	}) as any, [children, query, itemsPlural]);
 
 	return (
 		<ItemsTable
-			data={rows}
+			data={data}
 			css={tableStyle}
+			notFound={items.totalCount === 0}
+			pageInfo={items.pageInfo}
+			onPageChange={onPageChange}
 			data-test="search-results-table"
 		>
-			<ItemsTableAttribute<SearchResultsTableRow<T>>
+			<ItemsTableAttribute<SearchResultItem<T>>
 				label="Network"
 				colCss={networkColumnStyle}
-				render={({result}) => (
+				render={(item) => (
 					<div css={networkStyle}>
-						<img src={result.network.icon} css={networkIconStyle} />
-						<div>{result.network.displayName}</div>
+						<img src={item.network.icon} css={networkIconStyle} />
+						<div>{item.network.displayName}</div>
 					</div>
 				)}
 			/>
diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index f56a3950..38f55c74 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -19,7 +19,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 ) {
 	const {page = 1, refresh, refreshFirstPage, ...restOptions} = options;
 
-	const resource = useResource(fetchItems, [...args, { page, pageSize: 10 }], {
+	const resource = useResource(fetchItems, [...args, { page, pageSize: 10 /* TODO constant */ }], {
 		...restOptions,
 		refresh: refresh || (refreshFirstPage && page === 1)
 	});
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
index c870ed6d..c867b2d9 100644
--- a/src/hooks/useSearch.ts
+++ b/src/hooks/useSearch.ts
@@ -3,10 +3,19 @@ import { search } from "../services/searchService";
 
 import { UseResourceOptions, useResource } from "./useResource";
 
+interface UseSearchOptions extends UseResourceOptions {
+	page?: number;
+}
+
 export function useSearch(
 	query: string,
-	networks?: Network[],
-	options?: UseResourceOptions
+	networks: Network[],
+	options: UseSearchOptions = {}
 ) {
-	return useResource(search, [query, networks], options);
+	const { page = 1 } = options;
+
+	return useResource(search, [query, networks, {
+		page,
+		pageSize: 10 // TODO constant
+	}], options);
 }
diff --git a/src/model/account.ts b/src/model/account.ts
index 0e9ba991..708f8704 100644
--- a/src/model/account.ts
+++ b/src/model/account.ts
@@ -1,7 +1,9 @@
 import { AccountIdentity } from "./accountIdentity";
+import { Network } from "./network";
 
 export type Account = {
 	id: string;
+	network: Network;
 	address: string;
 	identity: AccountIdentity | null;
 }
diff --git a/src/model/block.ts b/src/model/block.ts
index 089d2cfe..08896a2c 100644
--- a/src/model/block.ts
+++ b/src/model/block.ts
@@ -1,5 +1,8 @@
+import { Network } from "./network";
+
 export type Block = {
 	id: string;
+	network: Network;
 	hash: string;
 	height: number;
 	timestamp: string;
diff --git a/src/model/call.ts b/src/model/call.ts
index ca57ec30..bf85fb4a 100644
--- a/src/model/call.ts
+++ b/src/model/call.ts
@@ -1,8 +1,9 @@
 import { DecodedCall } from "./decodedMetadata";
+import { Network } from "./network";
 
 export type Call = {
 	id: string;
-	network: string;
+	network: Network;
 	callName: string;
 	palletName: string;
 	blockId: string;
diff --git a/src/model/event.ts b/src/model/event.ts
index 87ce1471..12948041 100644
--- a/src/model/event.ts
+++ b/src/model/event.ts
@@ -1,8 +1,9 @@
 import { DecodedEvent } from "./decodedMetadata";
+import { Network } from "./network";
 
 export type Event = {
 	id: string;
-	network: string;
+	network: Network;
 	eventName: string;
 	palletName: string;
 	blockId: string;
diff --git a/src/model/extrinsic.ts b/src/model/extrinsic.ts
index 3b7f4030..28058482 100644
--- a/src/model/extrinsic.ts
+++ b/src/model/extrinsic.ts
@@ -1,8 +1,9 @@
 import { DecodedCall } from "./decodedMetadata";
+import { Network } from "./network";
 
 export type Extrinsic = {
 	id: string;
-	network: string;
+	network: Network;
 	hash: string;
 	blockId: string;
 	blockHeight: number;
diff --git a/src/model/searchResult.ts b/src/model/searchResult.ts
new file mode 100644
index 00000000..26864ba4
--- /dev/null
+++ b/src/model/searchResult.ts
@@ -0,0 +1,19 @@
+import { ItemsResponse } from "./itemsResponse";
+import { SearchResultItem } from "./searchResultItem";
+
+import { Account } from "./account";
+import { Block } from "./block";
+import { Event } from "./event";
+import { Extrinsic } from "./extrinsic";
+
+export type SearchResult = {
+	accountItems: ItemsResponse<SearchResultItem<Account>, true>
+	blockItems: ItemsResponse<SearchResultItem<Block>, true>
+	extrinsicItems: ItemsResponse<SearchResultItem<Extrinsic>, true>
+	eventItems: ItemsResponse<SearchResultItem<Event>, true>
+	accountsTotalCount: number;
+	blocksTotalCount: number;
+	extrinsicsTotalCount: number;
+	eventsTotalCount: number;
+	totalCount: number;
+}
diff --git a/src/model/searchResultItem.ts b/src/model/searchResultItem.ts
new file mode 100644
index 00000000..4377ebb4
--- /dev/null
+++ b/src/model/searchResultItem.ts
@@ -0,0 +1,8 @@
+import { Network } from "./network";
+
+export type SearchResultItem<T> = {
+	network: Network;
+	data?: T;
+	groupedCount?: number;
+	// TODO error;
+}
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index ae249f39..3aa77ef1 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -3,31 +3,22 @@ import { useEffect, useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
-import { AccountAddress } from "../components/AccountAddress";
-import { ButtonLink } from "../components/ButtonLink";
 import { Card, CardHeader } from "../components/Card";
-import DataViewer from "../components/DataViewer";
 import { ErrorMessage } from "../components/ErrorMessage";
-import { Link } from "../components/Link";
 import Loading from "../components/Loading";
 import NotFound from "../components/NotFound";
-import { SearchResultsTable, SearchResultsTableItemAttribute } from "../components/search/SearchResultsTable";
+import { BlockSearchResultsTable } from "../components/search/BlockSearchResultsTable";
+import { AccountSearchResultsTable } from "../components/search/AccountSearchResultsTable";
+import { ExtrinsicSearchResultsTable } from "../components/search/ExtrinsicSearchResultsTable";
+import { EventSearchResultsTable } from "../components/search/EventSearchResultsTable";
 import { TabbedContent, TabPane } from "../components/TabbedContent";
-import { Time } from "../components/Time";
 
 import { useDOMEventTrigger } from "../hooks/useDOMEventTrigger";
+import { usePage } from "../hooks/usePage";
 import { useSearch } from "../hooks/useSearch";
 import { useTab } from "../hooks/useTab";
 
-import { Account } from "../model/account";
-import { Block } from "../model/block";
-import { Event } from "../model/event";
-import { Extrinsic } from "../model/extrinsic";
-
 import { getNetworks } from "../services/networksService";
-import { NetworkSearchResult } from "../services/searchService";
-
-import { encodeAddress } from "../utils/address";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -47,10 +38,6 @@ const loadingStyle = css`
 	word-break: break-all;
 `;
 
-const eventArgsColCss = css`
-	width: 35%;
-`;
-
 export const SearchPage = () => {
 	const [qs] = useSearchParams();
 
@@ -61,13 +48,15 @@ export const SearchPage = () => {
 		preserveQueryParams: ["query", "network"]
 	});
 
+	const [page, setPage] = usePage();
+
 	console.log("query", query, networkNames);
 
 	const [forceLoading, setForceLoading] = useState<boolean>(true);
 
-	const searchResults = useSearch(query, getNetworks(networkNames));
+	const searchResult = useSearch(query, getNetworks(networkNames), { page });
 
-	console.log("results", searchResults);
+	console.log("results", searchResult);
 
 	useEffect(() => {
 		// show loading at least for 1s to prevent flickering
@@ -75,29 +64,32 @@ export const SearchPage = () => {
 		setTimeout(() => setForceLoading(false), 1000);
 	}, [query]);
 
-	useDOMEventTrigger("data-loaded", !searchResults.loading);
+	useDOMEventTrigger("data-loaded", !searchResult.loading);
 
 	if (!query) {
 		return <Navigate to="/" replace />;
 	}
 
-	if (!forceLoading && searchResults.data?.total === 1) {
-		const result = searchResults.data.results[0] as NetworkSearchResult;
+	if (!forceLoading && searchResult.data?.totalCount === 1) {
+		const result = searchResult.data;
 
-		if (result.extrinsics.data[0]) {
-			return <Navigate to={`/${result.network.name}/extrinsic/${result.extrinsics.data[0].id}`} replace />;
+		const extrinsicItem = result.extrinsicItems.data[0];
+		if (extrinsicItem?.data) {
+			return <Navigate to={`/${extrinsicItem.network}/extrinsic/${extrinsicItem.data.id}`} replace />;
 		}
 
-		if (result.blocks.data[0]) {
-			return <Navigate to={`/${result.network.name}/block/${result.blocks.data[0].id}`} replace />;
+		const blockItem = result.blockItems.data[0];
+		if (blockItem?.data) {
+			return <Navigate to={`/${blockItem.network}/block/${blockItem.data.id}`} replace />;
 		}
 
-		if (result.accounts.data[0]) {
-			return <Navigate to={`/${result.network.name}/account/${result.accounts.data[0].id}`} replace />;
+		const accountItem = result.accountItems.data[0];
+		if (accountItem?.data) {
+			return <Navigate to={`/${accountItem.network}/account/${accountItem.data.id}`} replace />;
 		}
 	}
 
-	if (searchResults.loading || forceLoading) {
+	if (searchResult.loading || forceLoading) {
 		return (
 			<Card>
 				<CardHeader css={loadingStyle}>
@@ -108,7 +100,7 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (searchResults.notFound || !searchResults.data) {
+	if (searchResult.notFound || !searchResult.data) {
 		return (
 			<Card>
 				<NotFound>Nothing was found for query <span css={queryStyle}>{query}</span></NotFound>
@@ -116,12 +108,12 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (searchResults.error) {
+	if (searchResult.error) {
 		return (
 			<Card>
 				<ErrorMessage
 					message={<>Unexpected error occured while searching for <span css={queryStyle}>{query}</span></>}
-					details={searchResults.error.message}
+					details={searchResult.error.message}
 					showReported
 				/>
 			</Card>
@@ -134,192 +126,54 @@ export const SearchPage = () => {
 				Search results for query <span css={queryStyle}>{query}</span>
 			</CardHeader>
 			<TabbedContent currentTab={tab} onTabChange={setTab}>
-				{searchResults.data.accountsTotal > 0 &&
-					<TabPane
-						label="Accounts"
-						count={searchResults.data.accountsTotal}
-						value="accounts"
-					>
-						<SearchResultsTable<Account>
-							query={query}
-							results={searchResults.data.results}
-							getItems={(result) => result.accounts}
-							itemsPlural="accounts"
-						>
-							<SearchResultsTableItemAttribute<Account>
-								label="Account"
-								render={(account, network) => (
-									<AccountAddress
-										address={encodeAddress(account.id, network.prefix)}
-										network={network}
-										copyToClipboard="small"
-									/>
-								)}
-							/>
-						</SearchResultsTable>
-					</TabPane>
-				}
-				{searchResults.data.blocksTotal > 0 &&
-					<TabPane
-						label="Blocks"
-						count={searchResults.data.blocksTotal}
-						value="blocks"
-					>
-						<SearchResultsTable<Block>
-							query={query}
-							results={searchResults.data.results}
-							getItems={(result) => result.blocks}
-							itemsPlural="blocks"
-						>
-							<SearchResultsTableItemAttribute<Block>
-								label="Block (Height)"
-								render={(block, network) =>
-									<Link to={`/${network.name}/block/${block.id}`}>
-										{block.height}
-									</Link>
-								}
-							/>
-							<SearchResultsTableItemAttribute<Block>
-								label="Spec version"
-								render={(block) =>
-									<>{block.specVersion}</>
-								}
-							/>
-							<SearchResultsTableItemAttribute<Block>
-								label="Validator"
-								render={(block, network) =>
-									block.validator &&
-									<AccountAddress
-										network={network}
-										address={block.validator}
-										shorten
-										copyToClipboard="small"
-									/>
-								}
-							/>
-							<SearchResultsTableItemAttribute<Block>
-								label="Time"
-								render={(block) =>
-									<Time time={block.timestamp} fromNow tooltip utc />
-								}
-							/>
-						</SearchResultsTable>
-					</TabPane>
-				}
-				{searchResults.data.extrinsicsTotal > 0 &&
-					<TabPane
-						label="Extrinsics"
-						count={searchResults.data.extrinsicsTotal}
-						value="extrinsics"
-					>
-						<SearchResultsTable<Extrinsic>
-							query={query}
-							results={searchResults.data.results}
-							getItems={(result) => result.extrinsics}
-							itemsPlural="extrinsics"
-						>
-							<SearchResultsTableItemAttribute<Extrinsic>
-								label="Extrinsic (ID)"
-								render={(extrinsic, network) => (
-									<Link to={`/${network.name}/extrinsic/${extrinsic.id}`}>
-										{extrinsic.id}
-									</Link>
-								)}
-							/>
-							<SearchResultsTableItemAttribute<Extrinsic>
-								label="Name"
-								render={(extrinsic, network) => (
-									<ButtonLink
-										to={`/${network.name}/search?query=${extrinsic.palletName}.${extrinsic.callName}`}
-										size="small"
-										color="secondary"
-									>
-										{extrinsic.palletName}.{extrinsic.callName}
-									</ButtonLink>
-								)}
-							/>
-							<SearchResultsTableItemAttribute<Extrinsic>
-								label="Account"
-								render={(extrinsic, network) =>
-									extrinsic.signer &&
-											<AccountAddress
-												network={network}
-												address={extrinsic.signer}
-												shorten
-												copyToClipboard="small"
-											/>
-								}
-							/>
-							<SearchResultsTableItemAttribute<Extrinsic>
-								label="Time"
-								render={(extrinsic) => (
-									<Time time={extrinsic.timestamp} fromNow tooltip utc />
-								)}
-							/>
-						</SearchResultsTable>
-					</TabPane>
-				}
-				{searchResults.data.eventsTotal > 0 &&
-					<TabPane
-						label="Events"
-						count={searchResults.data.eventsTotal}
-						value="events"
-					>
-						<SearchResultsTable<Event>
-							query={query}
-							results={searchResults.data.results}
-							getItems={(result) => result.events}
-							itemsPlural="events"
-						>
-							<SearchResultsTableItemAttribute<Event>
-								label="Event (ID)"
-								render={(event, network) => (
-									<Link to={`/${network.name}/event/${event.id}`}>
-										{event.id}
-									</Link>
-								)}
-							/>
-							<SearchResultsTableItemAttribute<Event>
-								label="Name"
-								render={(event, network) => (
-									<ButtonLink
-										to={`/${network.name}/search?query=${event.palletName}.${event.eventName}`}
-										size="small"
-										color="secondary"
-									>
-										{event.palletName}.{event.eventName}
-									</ButtonLink>
-								)}
-							/>
-							<SearchResultsTableItemAttribute<Event>
-								label="Extrinsic"
-								render={(event, network) => (
-									<Link to={`/${network.name}/extrinsic/${event.extrinsicId}`}>
-										{event.extrinsicId}
-									</Link>
-								)}
-							/>
-							<SearchResultsTableItemAttribute<Event>
-								label="Parameters"
-								colCss={eventArgsColCss}
-								render={(event, network) => {
-									if (!event.args) {
-										return null;
-									}
-
-									return (
-										<DataViewer
-											network={network}
-											data={event.args}
-											metadata={event.metadata.event?.args}
-											copyToClipboard
-										/>
-									);
-								}}
-							/>
-						</SearchResultsTable>
-					</TabPane>
-				}
+				<TabPane
+					label="Accounts"
+					count={searchResult.data.accountsTotalCount}
+					value="accounts"
+					hide={searchResult.data.accountsTotalCount === 0}
+				>
+					<AccountSearchResultsTable
+						items={searchResult.data.accountItems}
+						query={query}
+						onPageChange={setPage}
+					/>
+				</TabPane>
+				<TabPane
+					label="Blocks"
+					count={searchResult.data.blocksTotalCount}
+					value="blocks"
+					hide={searchResult.data.blocksTotalCount === 0}
+				>
+					<BlockSearchResultsTable
+						items={searchResult.data.blockItems}
+						query={query}
+						onPageChange={setPage}
+					/>
+				</TabPane>
+				<TabPane
+					label="Extrinsics"
+					count={searchResult.data.extrinsicsTotalCount}
+					value="extrinsics"
+					hide={searchResult.data.extrinsicsTotalCount === 0}
+				>
+					<ExtrinsicSearchResultsTable
+						items={searchResult.data.extrinsicItems}
+						query={query}
+						onPageChange={setPage}
+					/>
+				</TabPane>
+				<TabPane
+					label="Events"
+					count={searchResult.data.eventsTotalCount}
+					value="events"
+					hide={searchResult.data.eventsTotalCount === 0}
+				>
+					<EventSearchResultsTable
+						items={searchResult.data.eventItems}
+						query={query}
+						onPageChange={setPage}
+					/>
+				</TabPane>
 			</TabbedContent>
 		</Card>
 	);
diff --git a/src/services/accountService.ts b/src/services/accountService.ts
index fcc9f000..ca1a7596 100644
--- a/src/services/accountService.ts
+++ b/src/services/accountService.ts
@@ -23,6 +23,7 @@ export async function getAccount(network: string, address: string): Promise<Acco
 
 	const account: Account = {
 		id: address,
+		network: getNetwork(network),
 		address,
 		identity: null
 	};
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index 0d30eed4..9a126685 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -7,7 +7,7 @@ import { PaginationOptions } from "../model/paginationOptions";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
-import { hasSupport } from "./networksService";
+import { getNetwork, hasSupport } from "./networksService";
 
 export type BlocksFilter =
 	{ id_eq: string; }
@@ -60,7 +60,7 @@ async function getArchiveBlock(network: string, filter: BlocksFilter) {
 		}
 	);
 
-	const block = response.blocks[0] && unifyArchiveBlock(response.blocks[0]);
+	const block = response.blocks[0] && unifyArchiveBlock(response.blocks[0], network);
 
 	return block;
 }
@@ -84,7 +84,7 @@ async function getExplorerSquidBlock(network: string, filter: BlocksFilter) {
 		}
 	);
 
-	const block = response.blocks[0] && unifyExplorerSquidBlock(response.blocks[0]);
+	const block = response.blocks[0] && unifyExplorerSquidBlock(response.blocks[0], network);
 
 	return block;
 }
@@ -131,7 +131,7 @@ async function getArchiveBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyArchiveBlock);
+	const blocks = extractConnectionItems(response.blocksConnection, unifyArchiveBlock, network);
 
 	return blocks;
 }
@@ -176,20 +176,24 @@ async function getExplorerSquidBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyExplorerSquidBlock);
+	const blocks = extractConnectionItems(response.blocksConnection, unifyExplorerSquidBlock, network);
 
 	return blocks;
 }
 
-function unifyArchiveBlock(block: ArchiveBlock): Block {
+function unifyArchiveBlock(block: ArchiveBlock, network: string): Block {
 	return {
 		...block,
+		network: getNetwork(network),
 		specVersion: block.spec.specVersion
 	};
 }
 
-export function unifyExplorerSquidBlock(block: ExplorerSquidBlock): Block {
-	return block;
+export function unifyExplorerSquidBlock(block: ExplorerSquidBlock, network: string): Block {
+	return {
+		...block,
+		network: getNetwork(network),
+	};
 }
 
 export function blocksFilterToArchiveFilter(filter?: BlocksFilter) {
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index a9430ab1..f3e4c4cf 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -10,7 +10,7 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getCallRuntimeMetadata } from "./runtimeMetadataService";
-import { hasSupport } from "./networksService";
+import { getNetwork, hasSupport } from "./networksService";
 
 export type CallsFilter =
 	{ id_eq: string; }
@@ -257,7 +257,7 @@ async function unifyArchiveCall(call: ArchiveCall, network: string): Promise<Cal
 
 	return {
 		...call,
-		network,
+		network: getNetwork(network),
 		callName,
 		palletName,
 		blockId: call.block.id,
@@ -282,7 +282,7 @@ async function unifyExplorerSquidCall(call: ExplorerSquidCall, network: string):
 
 	return {
 		...call,
-		network,
+		network: getNetwork(network),
 		blockId: call.block.id,
 		blockHeight: call.block.height,
 		timestamp: call.block.timestamp,
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index c40f9425..a72660a5 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -11,7 +11,7 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 import { upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
-import { hasSupport } from "./networksService";
+import { getNetwork, hasSupport } from "./networksService";
 import { getEventsRuntimeMetadata, getPalletsRuntimeMetadata, getRuntimeEventMetadata } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
 
@@ -348,7 +348,7 @@ async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<
 
 	return {
 		...event,
-		network,
+		network: getNetwork(network),
 		blockId: event.block.id,
 		blockHeight: event.block.height,
 		timestamp: event.block.timestamp,
@@ -370,7 +370,7 @@ export async function unifyExplorerSquidEvent(event: ExplorerSquidEvent, network
 
 	return {
 		...event,
-		network,
+		network: getNetwork(network),
 		blockId: event.block.id,
 		blockHeight: event.block.height,
 		timestamp: event.block.timestamp,
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index d0f0c21b..1c0a3467 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -11,7 +11,7 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 import { lowerFirst, upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
-import { hasSupport } from "./networksService";
+import { getNetwork, hasSupport } from "./networksService";
 import { getCallRuntimeMetadata, getCallsRuntimeMetadata, getPalletsRuntimeMetadata } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
 
@@ -264,7 +264,7 @@ async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: strin
 
 	return {
 		...extrinsic,
-		network,
+		network: getNetwork(network),
 		blockId: extrinsic.block.id,
 		blockHeight: extrinsic.block.height,
 		timestamp: extrinsic.block.timestamp,
@@ -288,7 +288,7 @@ export async function unifyExplorerSquidExtrinsic(extrinsic: ExplorerSquidExtrin
 
 	return {
 		...extrinsic,
-		network,
+		network: getNetwork(network),
 		hash: extrinsic.extrinsicHash,
 		blockId: extrinsic.block.id,
 		blockHeight: extrinsic.block.height,
@@ -310,7 +310,7 @@ export async function unifyExplorerSquidExtrinsic(extrinsic: ExplorerSquidExtrin
 
 export async function getExtrinsicMetadata(extrinsic: Omit<Extrinsic, "metadata">): Promise<Extrinsic["metadata"]> {
 	return {
-		call: await getCallRuntimeMetadata(extrinsic.network, extrinsic.specVersion, extrinsic.palletName, extrinsic.callName)
+		call: await getCallRuntimeMetadata(extrinsic.network.name, extrinsic.specVersion, extrinsic.palletName, extrinsic.callName)
 	};
 }
 
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index f8bc43a3..dc0b37eb 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -14,55 +14,45 @@ import { Network } from "../model/network";
 
 import { decodeAddress, encodeAddress, isAccountPublicKey, isEncodedAddress } from "../utils/address";
 import { warningAssert } from "../utils/assert";
-import { extractConnectionItems } from "../utils/itemsConnection";
+import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { emptyResponse } from "../utils/itemsResponse";
 
 import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
 import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
 import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
 import { fetchExplorerSquid } from "./fetchService";
-import { getNetworks, hasSupport } from "./networksService";
+import { getNetwork, getNetworks, hasSupport } from "./networksService";
+import { PaginationOptions } from "../model/paginationOptions";
+import { PickByType } from "../utils/types";
+import { SearchResult } from "../model/searchResult";
+import { SearchResultItem } from "../model/searchResultItem";
 
-export type ItemId = {
-	id: string;
-}
-
-export type NetworkSearchResult = {
-	network: Network;
-	accounts: ItemsResponse<Account>;
-	blocks: ItemsResponse<Block>;
-	extrinsics: ItemsResponse<Extrinsic>;
-	events: ItemsResponse<Event>;
-	total: number;
-}
-
-export type SearchResult = {
-	results: NetworkSearchResult[];
-	accountsTotal: number;
-	blocksTotal: number;
-	extrinsicsTotal: number;
-	eventsTotal: number;
-	total: number;
-};
-
-export async function search(query: string, networks: Network[] = []): Promise<SearchResult> {
+export async function search(query: string, networks: Network[], pagination: PaginationOptions): Promise<SearchResult> {
 	if (networks.length === 0) {
 		networks = getNetworks();
 	}
 
-	const promiseResults = await Promise.allSettled(networks.map(async network => await searchNetwork(network, query, networks.length === 1)));
+	const promiseResults = await Promise.allSettled(
+		networks.map(async (network) =>
+			searchNetwork(network, query, pagination, networks.length === 1)
+		)
+	);
 
-	const results = promiseResults.filter(result => !!(result as any).value).map(result => (result as any).value as NetworkSearchResult);
-	let nonEmptyResults = results.filter((result) => result.total > 0);
+	const networkResults = promiseResults
+		.map((it) => it.status === "fulfilled" ? it.value : undefined)
+		.filter((it): it is NetworkSearchResult => !!it);
 
-	if (isAccountPublicKey(query) && nonEmptyResults.length === 0) {
+	let nonEmptyNetworkResults = networkResults.filter((result) => result.totalCount > 0);
+
+	if (isAccountPublicKey(query) && nonEmptyNetworkResults.length === 0) {
 		// if hash doesn't belong to any extrinsic or block, consider it as account's public key
-		nonEmptyResults = results.map<NetworkSearchResult>((result) => (
+		nonEmptyNetworkResults = networkResults.map<NetworkSearchResult>((result) => (
 			{
 				...result,
 				accounts: {
 					data: [{
 						id: decodeAddress(query),
+						network: result.network,
 						address: encodeAddress(query, result.network.prefix),
 						identity: null
 					}],
@@ -73,69 +63,122 @@ export async function search(query: string, networks: Network[] = []): Promise<S
 					},
 					totalCount: 1
 				},
-				total: 1
+				totalCount: 1
 			}
 		));
 	}
 
-	const accountsTotal = nonEmptyResults.reduce((total, result) => total + (result.accounts.totalCount || 0), 0);
-	const blocksTotal = nonEmptyResults.reduce((total, result) => total + (result.blocks.totalCount || 0), 0);
-	const extrinsicsTotal = nonEmptyResults.reduce((total, result) => total + (result.extrinsics.totalCount || 0), 0);
-	const eventsTotal = nonEmptyResults.reduce((total, result) => total + (result.events.totalCount || 0), 0);
-	const total = nonEmptyResults.reduce((total, result) => total + result.total, 0);
-
-	const result: SearchResult = {
-		results: nonEmptyResults,
-		accountsTotal,
-		blocksTotal,
-		extrinsicsTotal,
-		eventsTotal,
-		total
-	};
+	console.log("non empty results", nonEmptyNetworkResults);
+
+	if (networks.length === 1 && nonEmptyNetworkResults[0]) {
+		// when searching in single network, use found items
+		// directly as search items without grouping
+
+		const {
+			accounts,
+			blocks,
+			extrinsics,
+			events,
+			totalCount
+		} = nonEmptyNetworkResults[0];
+
+		return {
+			accountItems: itemsToSearchResultItems(accounts),
+			blockItems: itemsToSearchResultItems(blocks),
+			extrinsicItems: itemsToSearchResultItems(extrinsics),
+			eventItems: itemsToSearchResultItems(events),
+			accountsTotalCount: accounts.totalCount,
+			blocksTotalCount: blocks.totalCount,
+			extrinsicsTotalCount: extrinsics.totalCount,
+			eventsTotalCount: events.totalCount,
+			totalCount
+		};
+	}
+
+	const accountItems = networkResultsToSearchResultItems<Account>(nonEmptyNetworkResults, "accounts", pagination);
+	const blockItems = networkResultsToSearchResultItems<Block>(nonEmptyNetworkResults, "blocks", pagination);
+	const extrinsicItems = networkResultsToSearchResultItems<Extrinsic>(nonEmptyNetworkResults, "extrinsics", pagination);
+	const eventItems = networkResultsToSearchResultItems<Event>(nonEmptyNetworkResults, "events", pagination);
+
+	const accountsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.accounts.totalCount, 0);
+	const blocksTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.blocks.totalCount, 0);
+	const extrinsicsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.extrinsics.totalCount, 0);
+	const eventsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.events.totalCount, 0);
+	const totalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.totalCount, 0);
 
-	warningAssert(!isHex(query) || blocksTotal <= 1, {
+	warningAssert(!isHex(query) || blocksTotalCount <= 1, {
 		message: "Block hashes should be unique",
-		query,
-		result
+		query
 	});
 
-	return result;
+	return {
+		accountItems,
+		blockItems,
+		extrinsicItems,
+		eventItems,
+		accountsTotalCount,
+		blocksTotalCount,
+		extrinsicsTotalCount,
+		eventsTotalCount,
+		totalCount
+	};
 }
 
 /*** PRIVATE ***/
 
-async function searchNetwork(network: Network, query: string, fetchAll = false) {
+type NetworkSearchResult = {
+	network: Network;
+	accounts: ItemsResponse<Account, true>;
+	blocks: ItemsResponse<Block, true>;
+	extrinsics: ItemsResponse<Extrinsic, true>;
+	events: ItemsResponse<Event, true>;
+	totalCount: number;
+}
+
+async function searchNetwork(
+	network: Network,
+	query: string,
+	pagination: PaginationOptions,
+	fetchAll = false
+) {
 	if (!hasSupport(network.name, "explorer-squid")) {
-		return undefined;
+		return undefined; // TODO support all networks
 	}
 
 	if (isHex(query)) {
-		return searchNetworkByHash(network, query);
+		return searchNetworkByHash(network, query, pagination);
 	} else if (query?.match(/^\d+$/)) {
 		return searchNetworkByBlockHeight(network, parseInt(query));
 	} else if (isEncodedAddress(network, query)) {
 		return searchNetworkByEncodedAddress(network, query);
 	} else {
-		return searchNetworkByName(network, query, fetchAll);
+		return searchNetworkByName(network, query, pagination, fetchAll);
 	}
 }
 
 
-async function searchNetworkByHash(network: Network, hash: string) {
+async function searchNetworkByHash(
+	network: Network,
+	hash: string,
+	pagination: PaginationOptions,
+) {
 	const blocksFilter: BlocksFilter = {hash_eq: hash};
 	const extrinsicsFilter: ExtrinsicsFilter = {hash_eq: hash};
 
+	const {first, after} = paginationToConnectionCursor(pagination);
+
 	const response = await fetchExplorerSquid<{
 		blocks: ItemsConnection<ExplorerSquidBlock, true>,
 		extrinsics: ItemsConnection<ExplorerSquidExtrinsic, true>,
 	}>(
 		network.name,
 		`query (
-			$limit: Int,
+			$first: Int!,
+			$after: String
 			$blocksFilter: BlockWhereInput,
 			$extrinsicsFilter: ExtrinsicWhereInput,
 		) {
-			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_ASC) {
+			blocks: blocksConnection(first: $first, after: $after, where: $blocksFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -155,7 +198,7 @@ async function searchNetworkByHash(network: Network, hash: string) {
 				}
 				totalCount
 			},
-			extrinsics: extrinsicsConnection(first: $limit, where: $extrinsicsFilter, orderBy: id_ASC) {
+			extrinsics: extrinsicsConnection(first: $first, after: $after, where: $extrinsicsFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -190,13 +233,14 @@ async function searchNetworkByHash(network: Network, hash: string) {
 			}
 		}`,
 		{
-			limit: 10,
+			first,
+			after,
 			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
 			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock);
+	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
 	const extrinsics = await extractConnectionItems(response.extrinsics, unifyExplorerSquidExtrinsic, network.name);
 
 	const result: NetworkSearchResult = {
@@ -205,7 +249,7 @@ async function searchNetworkByHash(network: Network, hash: string) {
 		blocks,
 		extrinsics,
 		events: emptyResponse(),
-		total: blocks.totalCount + extrinsics.totalCount
+		totalCount: blocks.totalCount + extrinsics.totalCount
 	};
 
 	return result;
@@ -218,11 +262,8 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 		blocks: ItemsConnection<ExplorerSquidBlock, true>,
 	}>(
 		network.name,
-		`query (
-			$limit: Int,
-			$blocksFilter: BlockWhereInput,
-		) {
-			blocks: blocksConnection(first: $limit, where: $blocksFilter, orderBy: id_ASC) {
+		`query ($blocksFilter: BlockWhereInput) {
+			blocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -244,12 +285,11 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 			},
 		}`,
 		{
-			limit: 10,
 			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock);
+	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -257,7 +297,7 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 		blocks,
 		extrinsics: emptyResponse(),
 		events: emptyResponse(),
-		total: blocks.totalCount
+		totalCount: blocks.totalCount
 	};
 
 	return result;
@@ -269,6 +309,7 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 		accounts: {
 			data: [{
 				id: decodeAddress(encodedAddress),
+				network: getNetwork(network.name),
 				address: encodedAddress,
 				identity: null
 			}],
@@ -282,13 +323,18 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 		blocks: emptyResponse(),
 		extrinsics: emptyResponse(),
 		events: emptyResponse(),
-		total: 1
+		totalCount: 1
 	};
 
 	return result;
 }
 
-async function searchNetworkByName(network: Network, query: string, fetchAll: boolean) {
+async function searchNetworkByName(
+	network: Network,
+	query: string,
+	pagination: PaginationOptions,
+	fetchAll: boolean,
+) {
 	const extrinsicName = await normalizeExtrinsicName(network.name, query);
 	const eventName = await normalizeEventName(network.name, query);
 
@@ -339,17 +385,20 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 		}
 	}
 
+	const {first, after} = paginationToConnectionCursor(pagination);
+
 	const response = await fetchExplorerSquid<{
 		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
 		events: ItemsConnection<ExplorerSquidEvent>,
 	}>(
 		network.name,
 		`query (
-			$limit: Int,
+			$first: Int!,
+			$after: String
 			$eventsFilter: EventWhereInput,
 			$extrinsicsFilter: ExtrinsicWhereInput,
 		) {
-			extrinsics: extrinsicsConnection(first: $limit, where: $extrinsicsFilter, orderBy: id_DESC) {
+			extrinsics: extrinsicsConnection(first: $first, after: $after, where: $extrinsicsFilter, orderBy: id_DESC) {
 				edges {
 					node {
 						id
@@ -381,7 +430,7 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 					startCursor
 				}
 			}
-			events: eventsConnection(first: $limit, where: $eventsFilter, orderBy: id_DESC) {
+			events: eventsConnection(first: $first, after: $after, where: $eventsFilter, orderBy: id_DESC) {
 				edges {
 					node {
 						id
@@ -410,7 +459,8 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 			}
 		}`,
 		{
-			limit: 10,
+			first,
+			after,
 			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
 			eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
 		}
@@ -431,17 +481,63 @@ async function searchNetworkByName(network: Network, query: string, fetchAll: bo
 		)
 	);
 
-	extrinsics.totalCount = countersResponse.extrinsicsByNameCounter?.total || 0;
-	events.totalCount = countersResponse.eventsByNameCounter?.total || 0;
+	const extrinsicsTotalCount = countersResponse.extrinsicsByNameCounter?.total || 0;
+	const eventsTotalCount = countersResponse.eventsByNameCounter?.total || 0;
 
 	const result: NetworkSearchResult = {
 		network,
 		accounts: emptyResponse(),
 		blocks: emptyResponse(),
-		extrinsics,
-		events,
-		total: extrinsics.totalCount + events.totalCount
+		extrinsics: {
+			...extrinsics,
+			totalCount: extrinsicsTotalCount
+		},
+		events: {
+			...events,
+			totalCount: eventsTotalCount
+		},
+		totalCount: extrinsicsTotalCount + eventsTotalCount
 	};
 
 	return result;
 }
+
+function itemsToSearchResultItems<T extends {network: Network}>(items: ItemsResponse<T, true>): ItemsResponse<SearchResultItem<T>, true> {
+	return {
+		...items,
+		data: items.data.map(it => ({
+			network: it.network,
+			data: it
+		})),
+	};
+}
+
+function networkResultsToSearchResultItems<T>(
+	networkResults: NetworkSearchResult[],
+	itemsType: keyof PickByType<NetworkSearchResult, ItemsResponse<T, true>>,
+	pagination: PaginationOptions
+): ItemsResponse<SearchResultItem<T>, true> {
+	const data = networkResults.flatMap<SearchResultItem<T>>((result) => {
+		const {data, totalCount} = result[itemsType];
+
+		if (totalCount === 0) {
+			return [];
+		}
+
+		return [{
+			network: result.network,
+			data: totalCount === 1 ? data[0] as T : undefined,
+			groupedCount: totalCount > 1 ? totalCount : undefined
+		}];
+	});
+
+	return {
+		data: data.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize),
+		pageInfo: {
+			page: pagination.page,
+			pageSize: pagination.pageSize,
+			hasNextPage: pagination.page * pagination.pageSize < data.length
+		},
+		totalCount: data.length
+	};
+}
diff --git a/src/utils/itemsResponse.ts b/src/utils/itemsResponse.ts
index 3adcd46d..23b44e0d 100644
--- a/src/utils/itemsResponse.ts
+++ b/src/utils/itemsResponse.ts
@@ -1,6 +1,6 @@
 import { ItemsResponse } from "../model/itemsResponse";
 
-export function emptyResponse(): ItemsResponse<never> {
+export function emptyResponse(): ItemsResponse<never, true> {
 	return {
 		data: [],
 		pageInfo: {
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 00000000..eecdc8ef
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1 @@
+export type PickByType<T, Value> = { [P in keyof T as T[P] extends Value | undefined ? P : never]: T[P] }

From f0c7e0559a5608334a9a9668f59016782db1a301 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 30 Oct 2023 16:34:23 +0100
Subject: [PATCH 11/21] search pagination refactoring

---
 src/components/AccountAddress.tsx             |   6 +-
 src/components/ItemsTable.tsx                 |  18 +-
 src/components/Loading.tsx                    |  11 +-
 src/components/TabbedContent.tsx              |   4 +-
 src/components/Time.tsx                       |  10 +-
 .../account/AccountBalancesTable.tsx          |   6 +-
 .../search/AccountSearchResultsTable.tsx      |  21 ++-
 .../search/BlockSearchResultsTable.tsx        |  22 +--
 .../search/EventSearchResultsTable.tsx        |  21 ++-
 .../search/ExtrinsicSearchResultsTable.tsx    |  21 ++-
 src/components/search/SearchResultsTable.tsx  |  21 +--
 src/hooks/useParam.ts                         |  41 +++++
 src/hooks/useResource.ts                      |   2 +-
 src/hooks/useSearch.ts                        |  57 ++++++-
 src/hooks/useTab.ts                           |  33 ++--
 src/model/pageInfo.ts                         |   1 +
 src/model/searchResult.ts                     |  12 +-
 src/model/searchResultItem.ts                 |   1 +
 src/router.tsx                                |   8 +-
 src/screens/network.tsx                       |  68 +++++---
 src/screens/search.tsx                        |  93 +++++++---
 src/services/balancesService.ts               |  12 +-
 src/services/eventsService.ts                 |   9 +-
 src/services/searchService.ts                 | 161 ++++++++++--------
 src/services/transfersService.ts              |  11 +-
 src/utils/equal.ts                            |   3 +
 src/utils/itemsConnection.ts                  |  16 +-
 src/utils/itemsResponse.ts                    |   7 +-
 src/utils/router.ts                           |  24 +++
 29 files changed, 456 insertions(+), 264 deletions(-)
 create mode 100644 src/hooks/useParam.ts
 create mode 100644 src/utils/equal.ts
 create mode 100644 src/utils/router.ts

diff --git a/src/components/AccountAddress.tsx b/src/components/AccountAddress.tsx
index 3b648168..620f1991 100644
--- a/src/components/AccountAddress.tsx
+++ b/src/components/AccountAddress.tsx
@@ -12,7 +12,7 @@ import { AccountAvatar } from "./AccountAvatar";
 import CopyToClipboardButton, { CopyToClipboardButtonProps } from "./CopyToClipboardButton";
 
 const accountAddressStyle = css`
-	display: inline-flex;
+	display: flex;
 	align-items: center;
 `;
 
@@ -72,10 +72,6 @@ export const AccountAddress = (props: AccountLinkProps) => {
 		return content;
 	}, [network, address, encodeAddress, link]);
 
-	/*if (!icon) {
-		return <>{content}</>;
-	}*/
-
 	return (
 		<div css={accountAddressStyle}>
 			{icon && (
diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index bc38803d..dd2c1c85 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -14,6 +14,10 @@ import { TablePagination } from "./TablePagination";
 import { TableSortOptions, TableSortOptionsProps } from "./TableSortOptions";
 import { TableSortToggle } from "./TableSortToggle";
 
+const containerStyle = css`
+	position: relative;
+`;
+
 const tableStyle = css`
 	table-layout: fixed;
 	min-width: 860px;
@@ -35,6 +39,15 @@ const cellStyle = css`
 	}
 `;
 
+const loadingOverlayStyle = css`
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 255, 255, .5);
+`;
+
 type ItemsTableItem = {
 	id: string;
 }
@@ -106,7 +119,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		...restProps
 	} = props;
 
-	if (loading) {
+	if (!data && loading) {
 		return <Loading />;
 	}
 
@@ -126,7 +139,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 
 	return (
 		<div {...restProps} data-class="table">
-			<TableContainer>
+			<TableContainer css={containerStyle}>
 				<Table css={tableStyle}>
 					<colgroup>
 						{Children.map(children, (child) => child && <col css={child.props.colCss} />)}
@@ -172,6 +185,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 						)}
 					</TableBody>
 				</Table>
+				{loading && <Loading css={loadingOverlayStyle} />}
 			</TableContainer>
 			{pageInfo && (
 				<TablePagination
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index dfb97f84..f791b248 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -2,14 +2,19 @@
 import { css } from "@emotion/react";
 
 import Spinner from "./Spinner";
+import { HTMLAttributes } from "react";
 
 const loadingStyle = css`
-	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 `;
 
-const Loading = () => {
+export interface LoadingProps extends HTMLAttributes<HTMLDivElement> {}
+
+const Loading = (props: LoadingProps) => {
 	return (
-		<div css={loadingStyle}>
+		<div {...props} css={loadingStyle}>
 			<Spinner />
 		</div>
 	);
diff --git a/src/components/TabbedContent.tsx b/src/components/TabbedContent.tsx
index 1f6f6e67..2b114dfd 100644
--- a/src/components/TabbedContent.tsx
+++ b/src/components/TabbedContent.tsx
@@ -103,7 +103,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 					<>
 						<span>{label}</span>
 						{count !== undefined && <span data-test="count" css={tabCountStyle}>({formatNumber(count)})</span>}
-						{(loading) && <CircularProgress css={tabLoadingStyle} size={14} />}
+						{(count === undefined && loading) && <CircularProgress css={tabLoadingStyle} size={14} />}
 						{!!error && <ErrorIcon css={tabErrorStyle} />}
 					</>
 				}
@@ -125,7 +125,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 		if (!currentTabPane) {
 			tabHandles[0] && onTabChange?.(tabHandles[0].props.value);
 		}
-	}, [currentTabPane, tabPanes, onTabChange]);
+	}, [currentTabPane, tabHandles, onTabChange]);
 
 	return (
 		<>
diff --git a/src/components/Time.tsx b/src/components/Time.tsx
index c8dbfd2f..e49f3a1d 100644
--- a/src/components/Time.tsx
+++ b/src/components/Time.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { formatDistanceToNowStrict } from "date-fns";
 import enGB from "date-fns/locale/en-GB";
 import { format as formatTime, formatInTimeZone as formatTimeInTimeZone } from "date-fns-tz";
@@ -23,7 +23,11 @@ export const Time = (props: TimeProps) => {
 		tooltip = false
 	} = props;
 
-	const [fromNowFormatted, setFromNowFormatted] = useState<string>();
+	const formatFromNow = useCallback((time: string|Date|number) => {
+		return formatDistanceToNowStrict(new Date(time), {addSuffix: true, locale: enGB});
+	}, []);
+
+	const [fromNowFormatted, setFromNowFormatted] = useState<string>(formatFromNow(time));
 
 	const formatted = useMemo(() => {
 		let format = formatProp;
@@ -42,7 +46,7 @@ export const Time = (props: TimeProps) => {
 	useEffect(() => {
 		if (fromNow) {
 			const interval = setInterval(() =>
-				setFromNowFormatted(formatDistanceToNowStrict(new Date(time), {addSuffix: true, locale: enGB}))
+				setFromNowFormatted(formatFromNow(time))
 			);
 
 			return () => clearInterval(interval);
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index cd6c2e11..cbcf6d96 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -5,6 +5,7 @@ import { css } from "@emotion/react";
 import Decimal from "decimal.js";
 
 import { AccountBalance } from "../../model/accountBalance";
+import { PageInfo } from "../../model/pageInfo";
 import { PaginationOptions } from "../../model/paginationOptions";
 import { Resource } from "../../model/resource";
 import { SortDirection } from "../../model/sortDirection";
@@ -96,10 +97,11 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 		return data?.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize);
 	}, [data, pagination.page, pagination.pageSize]);
 
-	const pageInfo = useMemo(() => ({
+	const pageInfo = useMemo<PageInfo>(() => ({
 		page: pagination.page,
 		pageSize: pagination.pageSize,
-		hasNextPage: pagination.page * pagination.pageSize < data.length
+		hasNextPage: pagination.page * pagination.pageSize < data.length,
+		totalPageCount: Math.ceil(data.length / pagination.pageSize)
 	}), [data, pagination]);
 
 	const handleSortSelected = useCallback((value: SortOrder<SortProperty<AccountBalance>>) => {
diff --git a/src/components/search/AccountSearchResultsTable.tsx b/src/components/search/AccountSearchResultsTable.tsx
index 42a7446e..2215232a 100644
--- a/src/components/search/AccountSearchResultsTable.tsx
+++ b/src/components/search/AccountSearchResultsTable.tsx
@@ -1,27 +1,30 @@
 import { Account } from "../../model/account";
 import { ItemsResponse } from "../../model/itemsResponse";
+import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 import { encodeAddress } from "../../utils/address";
 
 import { AccountAddress } from "../AccountAddress";
 
-import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
 
-export interface AccountSearchResultsTable {
-	query: string;
-	items: ItemsResponse<SearchResultItem<Account>, true>;
-	onPageChange?: (page: number) => void;
+export interface AccountSearchResultsTable
+	extends Pick<SearchResultsTableProps<Account>, "query" | "onPageChange"> {
+	accounts: PaginatedResource<SearchResultItem<Account>>;
 }
 
 export const AccountSearchResultsTable = (props: AccountSearchResultsTable) => {
-	const {query, items, onPageChange} = props;
+	const {accounts, ...tableProps} = props;
 
 	return (
 		<SearchResultsTable<Account>
-			query={query}
-			items={items}
+			data={accounts.data}
+			loading={accounts.loading}
+			pageInfo={accounts.pageInfo}
+			notFound={accounts.notFound}
+			error={accounts.error}
 			itemsPlural="accounts"
-			onPageChange={onPageChange}
+			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Account>
 				label="Account"
diff --git a/src/components/search/BlockSearchResultsTable.tsx b/src/components/search/BlockSearchResultsTable.tsx
index 4e1fd100..7cfe57fd 100644
--- a/src/components/search/BlockSearchResultsTable.tsx
+++ b/src/components/search/BlockSearchResultsTable.tsx
@@ -1,28 +1,30 @@
 import { Block } from "../../model/block";
-import { ItemsResponse } from "../../model/itemsResponse";
+import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 
 import { AccountAddress } from "../AccountAddress";
 import { Link } from "../Link";
 import { Time } from "../Time";
 
-import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
 
-export interface BlockSearchResultsTable {
-	query: string;
-	items: ItemsResponse<SearchResultItem<Block>, true>;
-	onPageChange?: (page: number) => void;
+export interface BlockSearchResultsTable
+	extends Pick<SearchResultsTableProps<Block>, "query" | "onPageChange"> {
+	blocks: PaginatedResource<SearchResultItem<Block>>;
 }
 
 export const BlockSearchResultsTable = (props: BlockSearchResultsTable) => {
-	const {query, items, onPageChange} = props;
+	const {blocks, ...tableProps} = props;
 
 	return (
 		<SearchResultsTable<Block>
-			query={query}
-			items={items}
+			data={blocks.data}
+			loading={blocks.loading}
+			pageInfo={blocks.pageInfo}
+			notFound={blocks.notFound}
+			error={blocks.error}
 			itemsPlural="blocks"
-			onPageChange={onPageChange}
+			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Block>
 				label="Block (Height)"
diff --git a/src/components/search/EventSearchResultsTable.tsx b/src/components/search/EventSearchResultsTable.tsx
index 3d891dcf..17a3338b 100644
--- a/src/components/search/EventSearchResultsTable.tsx
+++ b/src/components/search/EventSearchResultsTable.tsx
@@ -8,27 +8,30 @@ import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { Link } from "../Link";
 
-import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
+import { PaginatedResource } from "../../model/paginatedResource";
 
 const eventArgsColCss = css`
 	width: 35%;
 `;
 
-export interface EventSearchResultsTable {
-	query: string;
-	items: ItemsResponse<SearchResultItem<Event>, true>;
-	onPageChange?: (page: number) => void;
+export interface EventSearchResultsTable
+	extends Pick<SearchResultsTableProps<Event>, "query" | "onPageChange"> {
+	events: PaginatedResource<SearchResultItem<Event>>;
 }
 
 export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
-	const {query, items, onPageChange} = props;
+	const {events, ...tableProps} = props;
 
 	return (
 		<SearchResultsTable<Event>
-			query={query}
-			items={items}
+			data={events.data}
+			loading={events.loading}
+			pageInfo={events.pageInfo}
+			notFound={events.notFound}
+			error={events.error}
 			itemsPlural="events"
-			onPageChange={onPageChange}
+			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Event>
 				label="Event (ID)"
diff --git a/src/components/search/ExtrinsicSearchResultsTable.tsx b/src/components/search/ExtrinsicSearchResultsTable.tsx
index 3b6faf7a..2ded2567 100644
--- a/src/components/search/ExtrinsicSearchResultsTable.tsx
+++ b/src/components/search/ExtrinsicSearchResultsTable.tsx
@@ -1,5 +1,6 @@
 import { Extrinsic } from "../../model/extrinsic";
 import { ItemsResponse } from "../../model/itemsResponse";
+import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 
 import { AccountAddress } from "../AccountAddress";
@@ -7,23 +8,25 @@ import { ButtonLink } from "../ButtonLink";
 import { Link } from "../Link";
 import { Time } from "../Time";
 
-import { SearchResultsTable, SearchResultsTableItemAttribute } from "./SearchResultsTable";
+import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
 
-export interface ExtrinsicSearchResultsTable {
-	query: string;
-	items: ItemsResponse<SearchResultItem<Extrinsic>, true>;
-	onPageChange?: (page: number) => void;
+export interface ExtrinsicSearchResultsTable
+	extends Pick<SearchResultsTableProps<Extrinsic>, "query" | "onPageChange"> {
+	extrinsics: PaginatedResource<SearchResultItem<Extrinsic>>;
 }
 
 export const ExtrinsicSearchResultsTable = (props: ExtrinsicSearchResultsTable) => {
-	const {query, items, onPageChange} = props;
+	const {extrinsics, ...tableProps} = props;
 
 	return (
 		<SearchResultsTable<Extrinsic>
-			query={query}
-			items={items}
+			data={extrinsics.data}
+			loading={extrinsics.loading}
+			pageInfo={extrinsics.pageInfo}
+			notFound={extrinsics.notFound}
+			error={extrinsics.error}
 			itemsPlural="extrinsics"
-			onPageChange={onPageChange}
+			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Extrinsic>
 				label="Extrinsic (ID)"
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index daad499d..c9abfa3f 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable.tsx
@@ -7,7 +7,7 @@ import { Network } from "../../model/network";
 import { ItemsResponse } from "../../model/itemsResponse";
 import { formatNumber } from "../../utils/number";
 
-import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps } from "../ItemsTable";
+import { ItemsTable, ItemsTableAttribute, ItemsTableAttributeProps, ItemsTableProps } from "../ItemsTable";
 import { Link } from "../Link";
 import { SearchResultItem } from "../../model/searchResultItem";
 
@@ -31,7 +31,7 @@ const networkIconStyle = css`
 	height: 20px;
 	object-fit: contain;
 	margin-right: 16px;
-	float: left;
+	flex: 0 0 auto;
 `;
 
 type SearchResultsTableChild<T> = ReactElement<ItemsTableAttributeProps<T, [Network], []>>;
@@ -39,21 +39,14 @@ type SearchResultsTableChild<T> = ReactElement<ItemsTableAttributeProps<T, [Netw
 
 export const SearchResultsTableItemAttribute = <T extends object>(props: ItemsTableAttributeProps<T, [], []>) => <ItemsTableAttribute {...props} />;
 
-export interface SearchResultsTableProps<T> {
+export interface SearchResultsTableProps<T> extends Omit<ItemsTableProps<SearchResultItem<T>>, "children"> {
 	children: SearchResultsTableChild<T>|(SearchResultsTableChild<T>|false|undefined|null)[];
 	query: string;
-	items: ItemsResponse<SearchResultItem<T>, true>;
 	itemsPlural: string
-	onPageChange?: (page: number) => void;
 }
 
 export const SearchResultsTable = <T extends {id: string, network: Network}>(props: SearchResultsTableProps<T>) => {
-	const { children, query, items, itemsPlural, onPageChange } = props;
-
-	const data = useMemo(() => items.data.map(it => ({
-		...it,
-		id: `${it.network.name}-${it.data?.id || "grouped"}`
-	})), [items]);
+	const { children, query, itemsPlural, ...itemsTableProps } = props;
 
 	const itemAttributes = useMemo(() => Children.map(children, (child, index) => {
 		if (!child) {
@@ -114,12 +107,8 @@ export const SearchResultsTable = <T extends {id: string, network: Network}>(pro
 
 	return (
 		<ItemsTable
-			data={data}
+			{...itemsTableProps}
 			css={tableStyle}
-			notFound={items.totalCount === 0}
-			pageInfo={items.pageInfo}
-			onPageChange={onPageChange}
-			data-test="search-results-table"
 		>
 			<ItemsTableAttribute<SearchResultItem<T>>
 				label="Network"
diff --git a/src/hooks/useParam.ts b/src/hooks/useParam.ts
new file mode 100644
index 00000000..25f870ac
--- /dev/null
+++ b/src/hooks/useParam.ts
@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+
+import { setLocationParams } from "../utils/router";
+
+import { routes } from "../router";
+
+export type UseSetParamValueOptions = {
+	preserveQueryParams?: string[];
+	replace?: boolean;
+}
+
+export function useParam<T extends string>(name: string) {
+	const location = useLocation();
+	const params = useParams();
+	const navigate = useNavigate();
+
+	const value = params[name] as T;
+
+	const setValue = useCallback((newValue: T, options: UseSetParamValueOptions) => {
+		const newPath = setLocationParams(location, {
+			[name]: newValue
+		}, routes);
+
+		const qs = new URLSearchParams(location.search);
+		const newQs = new URLSearchParams();
+
+		for (const param of options.preserveQueryParams || []) {
+			for (const values of qs.getAll(param)) {
+				newQs.append(param, values);
+			}
+		}
+
+		navigate({
+			pathname: newPath,
+			search: newQs.toString()
+		}, {replace: options.replace});
+	}, [location, params, navigate]);
+
+	return [value, setValue] as const;
+}
diff --git a/src/hooks/useResource.ts b/src/hooks/useResource.ts
index b3eb2963..78b5f92f 100644
--- a/src/hooks/useResource.ts
+++ b/src/hooks/useResource.ts
@@ -30,7 +30,7 @@ export function useResource<T = any, F extends any[] = any[]>(
 	const {skip, refresh, refreshInterval = 3000, ...swrOptions} = options;
 
 	const swrKey = !skip
-		? [fetchItem, args]
+		? [fetchItem, args] as const
 		: null;
 
 	const {data, isLoading, error, mutate} = useSwr(swrKey, swrFetcher, {
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
index c867b2d9..094c3b61 100644
--- a/src/hooks/useSearch.ts
+++ b/src/hooks/useSearch.ts
@@ -1,10 +1,22 @@
+import { Account } from "../model/account";
+import { Block } from "../model/block";
+import { Event } from "../model/event";
+import { Extrinsic } from "../model/extrinsic";
+import { ItemsResponse } from "../model/itemsResponse";
 import { Network } from "../model/network";
-import { search } from "../services/searchService";
+import { PaginatedResource } from "../model/paginatedResource";
+import { Resource } from "../model/resource";
+import { SearchResultItem } from "../model/searchResultItem";
+import { SearchResult } from "../model/searchResult";
+
+import { SearchPaginationOptions, search } from "../services/searchService";
+
+import { PickByType } from "../utils/types";
 
 import { UseResourceOptions, useResource } from "./useResource";
 
 interface UseSearchOptions extends UseResourceOptions {
-	page?: number;
+	pagination?: SearchPaginationOptions;
 }
 
 export function useSearch(
@@ -12,10 +24,45 @@ export function useSearch(
 	networks: Network[],
 	options: UseSearchOptions = {}
 ) {
-	const { page = 1 } = options;
+	const { pagination } = options;
 
-	return useResource(search, [query, networks, {
-		page,
+	console.log("search pagination", pagination);
+
+	const defaultPagination = {
+		page: 1,
 		pageSize: 10 // TODO constant
+	};
+
+	const resource = useResource(search, [query, networks, {
+		accounts: pagination?.accounts || defaultPagination,
+		blocks: pagination?.blocks || defaultPagination,
+		extrinsics: pagination?.extrinsics || defaultPagination,
+		events: pagination?.events || defaultPagination
 	}], options);
+
+	return {
+		...resource,
+		accounts: searchResultItemsToPaginatedResource<Account>(resource, "accounts"),
+		blocks: searchResultItemsToPaginatedResource<Block>(resource, "blocks"),
+		extrinsics: searchResultItemsToPaginatedResource<Extrinsic>(resource, "extrinsics"),
+		events: searchResultItemsToPaginatedResource<Event>(resource, "events"),
+		totalCount: resource.data?.totalCount
+	};
+}
+
+function searchResultItemsToPaginatedResource<T>(
+	resource: Resource<SearchResult>,
+	itemsType: keyof PickByType<SearchResult, ItemsResponse<SearchResultItem<T>, true>>,
+): PaginatedResource<SearchResultItem<T>> {
+	const items = resource.data?.[itemsType];
+
+	return {
+		data: items?.data as SearchResultItem<T>[] | undefined,
+		pageInfo: items?.pageInfo,
+		totalCount: items?.totalCount,
+		loading: resource.loading,
+		notFound: resource.notFound || items?.data.length === 0,
+		error: undefined, // TODO
+		refetch: resource.refetch
+	};
 }
diff --git a/src/hooks/useTab.ts b/src/hooks/useTab.ts
index 08fd5d9b..f6aeaff6 100644
--- a/src/hooks/useTab.ts
+++ b/src/hooks/useTab.ts
@@ -1,5 +1,6 @@
 import { useCallback } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+
+import { useParam } from "./useParam";
 
 export type UseTabParamOptions = {
 	paramName?: string;
@@ -7,28 +8,14 @@ export type UseTabParamOptions = {
 }
 
 export function useTab<T extends string>(options: UseTabParamOptions = {}) {
-	const [qs] = useSearchParams();
-	const params = useParams();
-
-	const navigate = useNavigate();
-
-	const currentTab = params[options.paramName || "tab"] as T;
-
-	const setTab = useCallback((newTab: T) => {
-		const path = currentTab ? `./../${newTab}` : newTab;
-		const newQs = new URLSearchParams();
-
-		for (const param of options.preserveQueryParams || []) {
-			for (const values of qs.getAll(param)) {
-				newQs.append(param, values);
-			}
-		}
+	const [value, setValue] = useParam(options.paramName || "tab");
 
-		navigate({
-			pathname: path,
-			search: newQs.toString()
-		}, {replace: !currentTab});
-	}, [currentTab, navigate]);
+	const setTab = useCallback((newValue: T) => {
+		setValue(newValue, {
+			preserveQueryParams: options.preserveQueryParams,
+			replace: !value
+		});
+	}, [value, options.preserveQueryParams, setValue]);
 
-	return [currentTab, setTab] as const;
+	return [value, setTab] as const;
 }
diff --git a/src/model/pageInfo.ts b/src/model/pageInfo.ts
index eff3ee32..00d147a7 100644
--- a/src/model/pageInfo.ts
+++ b/src/model/pageInfo.ts
@@ -2,4 +2,5 @@ export type PageInfo = {
 	page: number;
 	pageSize: number;
 	hasNextPage: boolean;
+	totalPageCount: number|undefined;
 }
diff --git a/src/model/searchResult.ts b/src/model/searchResult.ts
index 26864ba4..62777053 100644
--- a/src/model/searchResult.ts
+++ b/src/model/searchResult.ts
@@ -7,13 +7,9 @@ import { Event } from "./event";
 import { Extrinsic } from "./extrinsic";
 
 export type SearchResult = {
-	accountItems: ItemsResponse<SearchResultItem<Account>, true>
-	blockItems: ItemsResponse<SearchResultItem<Block>, true>
-	extrinsicItems: ItemsResponse<SearchResultItem<Extrinsic>, true>
-	eventItems: ItemsResponse<SearchResultItem<Event>, true>
-	accountsTotalCount: number;
-	blocksTotalCount: number;
-	extrinsicsTotalCount: number;
-	eventsTotalCount: number;
+	accounts: ItemsResponse<SearchResultItem<Account>, true>
+	blocks: ItemsResponse<SearchResultItem<Block>, true>
+	extrinsics: ItemsResponse<SearchResultItem<Extrinsic>, true>
+	events: ItemsResponse<SearchResultItem<Event>, true>
 	totalCount: number;
 }
diff --git a/src/model/searchResultItem.ts b/src/model/searchResultItem.ts
index 4377ebb4..e5d6093f 100644
--- a/src/model/searchResultItem.ts
+++ b/src/model/searchResultItem.ts
@@ -1,6 +1,7 @@
 import { Network } from "./network";
 
 export type SearchResultItem<T> = {
+	id: string;
 	network: Network;
 	data?: T;
 	groupedCount?: number;
diff --git a/src/router.tsx b/src/router.tsx
index ac8b7ad3..aca04ddb 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,4 +1,4 @@
-import { Navigate, createBrowserRouter, redirect } from "react-router-dom";
+import { Navigate, RouteObject, createBrowserRouter, redirect } from "react-router-dom";
 
 import { ResultLayout } from "./components/ResultLayout";
 import { getNetwork } from "./services/networksService";
@@ -18,7 +18,7 @@ import { RuntimePage } from "./screens/runtime";
 
 import { config } from "./config";
 
-export const router = createBrowserRouter([
+export const routes: RouteObject[] = [
 	{
 		path: "/",
 		element: <HomePage />,
@@ -104,7 +104,9 @@ export const router = createBrowserRouter([
 			},
 		]
 	}
-], {
+];
+
+export const router = createBrowserRouter(routes, {
 	basename: window.location.hostname === "localhost"
 		? undefined
 		: process.env.PUBLIC_URL
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 1116ccd4..08987992 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -44,6 +44,8 @@ export const NetworkPage = () => {
 	const [tab, setTab] = useTab();
 	const [page, setPage] = usePage();
 
+	console.log("tab", tab);
+
 	const extrinsics = useExtrinsicsWithoutTotalCount(network.name, undefined, {
 		page: tab === "extrinsics" ? page : 1,
 		refreshFirstPage: true
@@ -103,8 +105,6 @@ export const NetworkPage = () => {
 					</Card>
 				}
 			</CardRow>
-
-
 			<Card data-test="network-related-items">
 				<TabbedContent currentTab={tab} onTabChange={setTab}>
 					<TabPane
@@ -114,7 +114,13 @@ export const NetworkPage = () => {
 						error={extrinsics.error}
 						value="extrinsics"
 					>
-						<ExtrinsicsTable network={network} extrinsics={extrinsics} showAccount showTime />
+						<ExtrinsicsTable
+							network={network}
+							extrinsics={extrinsics}
+							showAccount
+							showTime
+							onPageChange={setPage}
+						/>
 					</TabPane>
 					<TabPane
 						label="Blocks"
@@ -123,31 +129,45 @@ export const NetworkPage = () => {
 						error={blocks.error}
 						value="blocks"
 					>
-						<BlocksTable network={network} blocks={blocks} showValidator showTime />
+						<BlocksTable
+							network={network}
+							blocks={blocks}
+							showValidator
+							showTime
+							onPageChange={setPage}
+						/>
 					</TabPane>
-
-
 					{hasSupport(network.name, "main-squid") &&
-							<TabPane
-								label="Transfers"
-								count={transfers.totalCount}
-								loading={transfers.loading}
-								error={transfers.error}
-								value="transfers"
-							>
-								<TransfersTable network={network} transfers={transfers} showTime />
-							</TabPane>
+						<TabPane
+							label="Transfers"
+							count={transfers.totalCount}
+							loading={transfers.loading}
+							error={transfers.error}
+							value="transfers"
+						>
+							<TransfersTable
+								network={network}
+								transfers={transfers}
+								showTime
+								onPageChange={setPage}
+							/>
+						</TabPane>
 					}
 					{hasSupport(network.name, "stats-squid") &&
-							<TabPane
-								label="Top holders"
-								count={topHolders.totalCount}
-								loading={topHolders.loading}
-								error={topHolders.error}
-								value="top-holders"
-							>
-								<BalancesTable network={network} balances={topHolders} usdRates={usdRates} />
-							</TabPane>
+						<TabPane
+							label="Top holders"
+							count={topHolders.totalCount}
+							loading={topHolders.loading}
+							error={topHolders.error}
+							value="top-holders"
+						>
+							<BalancesTable
+								network={network}
+								balances={topHolders}
+								usdRates={usdRates}
+								onPageChange={setPage}
+							/>
+						</TabPane>
 					}
 				</TabbedContent>
 			</Card>
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 3aa77ef1..fda0e786 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
@@ -7,6 +7,7 @@ import { Card, CardHeader } from "../components/Card";
 import { ErrorMessage } from "../components/ErrorMessage";
 import Loading from "../components/Loading";
 import NotFound from "../components/NotFound";
+
 import { BlockSearchResultsTable } from "../components/search/BlockSearchResultsTable";
 import { AccountSearchResultsTable } from "../components/search/AccountSearchResultsTable";
 import { ExtrinsicSearchResultsTable } from "../components/search/ExtrinsicSearchResultsTable";
@@ -20,6 +21,8 @@ import { useTab } from "../hooks/useTab";
 
 import { getNetworks } from "../services/networksService";
 
+import { isDeepEqual } from "../utils/equal";
+
 const queryStyle = css`
 	font-weight: normal;
 	word-break: break-all;
@@ -48,13 +51,38 @@ export const SearchPage = () => {
 		preserveQueryParams: ["query", "network"]
 	});
 
+	const previousQueryRef = useRef<string>();
+	const previousNetworkNamesRef = useRef<string[]>();
+
 	const [page, setPage] = usePage();
 
 	console.log("query", query, networkNames);
 
 	const [forceLoading, setForceLoading] = useState<boolean>(true);
 
-	const searchResult = useSearch(query, getNetworks(networkNames), { page });
+	const searchResult = useSearch(query, getNetworks(networkNames), {
+		pagination: {
+			accounts: {
+				page: tab === "accounts" ? page : 1,
+				pageSize: 10
+			},
+			blocks: {
+				page: tab === "blocks" ? page : 1,
+				pageSize: 10
+			},
+			extrinsics: {
+				page: tab === "extrinsics" ? page : 1,
+				pageSize: 10
+			},
+			events: {
+				page: tab === "events" ? page : 1,
+				pageSize: 10
+			}
+		},
+		keepPreviousData:
+			query === previousQueryRef.current
+			&& isDeepEqual(networkNames, previousNetworkNamesRef.current)
+	});
 
 	console.log("results", searchResult);
 
@@ -64,32 +92,37 @@ export const SearchPage = () => {
 		setTimeout(() => setForceLoading(false), 1000);
 	}, [query]);
 
+	useEffect(() => {
+		if (!searchResult.loading) {
+			previousQueryRef.current = query;
+			previousNetworkNamesRef.current = networkNames;
+		}
+	}, [searchResult.loading]);
+
 	useDOMEventTrigger("data-loaded", !searchResult.loading);
 
 	if (!query) {
 		return <Navigate to="/" replace />;
 	}
 
-	if (!forceLoading && searchResult.data?.totalCount === 1) {
-		const result = searchResult.data;
-
-		const extrinsicItem = result.extrinsicItems.data[0];
+	if (!forceLoading && searchResult.totalCount === 1) {
+		const extrinsicItem = searchResult.extrinsics.data?.[0];
 		if (extrinsicItem?.data) {
 			return <Navigate to={`/${extrinsicItem.network}/extrinsic/${extrinsicItem.data.id}`} replace />;
 		}
 
-		const blockItem = result.blockItems.data[0];
+		const blockItem = searchResult.blocks.data?.[0];
 		if (blockItem?.data) {
 			return <Navigate to={`/${blockItem.network}/block/${blockItem.data.id}`} replace />;
 		}
 
-		const accountItem = result.accountItems.data[0];
+		const accountItem = searchResult.accounts.data?.[0];
 		if (accountItem?.data) {
 			return <Navigate to={`/${accountItem.network}/account/${accountItem.data.id}`} replace />;
 		}
 	}
 
-	if (searchResult.loading || forceLoading) {
+	if ((!searchResult.data && searchResult.loading) || forceLoading) {
 		return (
 			<Card>
 				<CardHeader css={loadingStyle}>
@@ -100,7 +133,7 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (searchResult.notFound || !searchResult.data) {
+	if (searchResult.notFound) {
 		return (
 			<Card>
 				<NotFound>Nothing was found for query <span css={queryStyle}>{query}</span></NotFound>
@@ -127,49 +160,57 @@ export const SearchPage = () => {
 			</CardHeader>
 			<TabbedContent currentTab={tab} onTabChange={setTab}>
 				<TabPane
-					label="Accounts"
-					count={searchResult.data.accountsTotalCount}
 					value="accounts"
-					hide={searchResult.data.accountsTotalCount === 0}
+					label="Accounts"
+					count={searchResult.accounts.totalCount}
+					loading={searchResult.accounts.loading}
+					error={searchResult.accounts.error}
+					hide={searchResult.accounts.totalCount === 0}
 				>
 					<AccountSearchResultsTable
-						items={searchResult.data.accountItems}
+						accounts={searchResult.accounts}
 						query={query}
 						onPageChange={setPage}
 					/>
 				</TabPane>
 				<TabPane
-					label="Blocks"
-					count={searchResult.data.blocksTotalCount}
 					value="blocks"
-					hide={searchResult.data.blocksTotalCount === 0}
+					label="Blocks"
+					count={searchResult.blocks.totalCount}
+					loading={searchResult.blocks.loading}
+					error={searchResult.blocks.error}
+					hide={searchResult.blocks.totalCount === 0}
 				>
 					<BlockSearchResultsTable
-						items={searchResult.data.blockItems}
+						blocks={searchResult.blocks}
 						query={query}
 						onPageChange={setPage}
 					/>
 				</TabPane>
 				<TabPane
-					label="Extrinsics"
-					count={searchResult.data.extrinsicsTotalCount}
 					value="extrinsics"
-					hide={searchResult.data.extrinsicsTotalCount === 0}
+					label="Extrinsics"
+					count={searchResult.extrinsics.totalCount}
+					loading={searchResult.extrinsics.loading}
+					error={searchResult.extrinsics.error}
+					hide={searchResult.extrinsics.totalCount === 0}
 				>
 					<ExtrinsicSearchResultsTable
-						items={searchResult.data.extrinsicItems}
+						extrinsics={searchResult.extrinsics}
 						query={query}
 						onPageChange={setPage}
 					/>
 				</TabPane>
 				<TabPane
-					label="Events"
-					count={searchResult.data.eventsTotalCount}
 					value="events"
-					hide={searchResult.data.eventsTotalCount === 0}
+					label="Events"
+					count={searchResult.events.totalCount}
+					loading={searchResult.events.loading}
+					error={searchResult.events.error}
+					hide={searchResult.events.totalCount === 0}
 				>
 					<EventSearchResultsTable
-						items={searchResult.data.eventItems}
+						events={searchResult.events}
 						query={query}
 						onPageChange={setPage}
 					/>
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index 21ddfdf0..cd43ccf1 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -8,12 +8,12 @@ import { PaginationOptions } from "../model/paginationOptions";
 
 import { encodeAddress } from "../utils/address";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
+import { emptyItemsResponse } from "../utils/itemsResponse";
 import { rawAmountToDecimal } from "../utils/number";
 
 import { fetchStatsSquid } from "./fetchService";
 import { getNetwork, getNetworks, hasSupport } from "./networksService";
 
-
 export type BalancesFilter =
 	{ id_eq: string; }
 
@@ -63,15 +63,7 @@ export async function getBalances(
 		return balances;
 	}
 
-	return {
-		data: [],
-		pageInfo: {
-			page: 1,
-			pageSize: 10, // TODO constant
-			hasNextPage: false,
-		},
-		totalCount: 0,
-	};
+	return emptyItemsResponse();
 }
 
 export async function getAccountBalances(address: string) {
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index a72660a5..f48b0e0f 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -8,6 +8,7 @@ import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
+import { emptyItemsResponse } from "../utils/itemsResponse";
 import { upperFirst } from "../utils/string";
 
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
@@ -65,13 +66,7 @@ export async function getEventsByName(
 		);
 
 		if (countResponse.itemsCounterById === null || countResponse.itemsCounterById.total === 0) {
-			return {
-				data: [],
-				pageInfo: {
-					...pagination,
-					hasNextPage: false
-				}
-			};
+			return emptyItemsResponse();
 		}
 
 		const events = await getExplorerSquidEvents(network, filter, order, pagination, false);
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index dc0b37eb..3430ce02 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -15,7 +15,7 @@ import { Network } from "../model/network";
 import { decodeAddress, encodeAddress, isAccountPublicKey, isEncodedAddress } from "../utils/address";
 import { warningAssert } from "../utils/assert";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
-import { emptyResponse } from "../utils/itemsResponse";
+import { emptyItemsResponse } from "../utils/itemsResponse";
 
 import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
 import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
@@ -27,7 +27,10 @@ import { PickByType } from "../utils/types";
 import { SearchResult } from "../model/searchResult";
 import { SearchResultItem } from "../model/searchResultItem";
 
-export async function search(query: string, networks: Network[], pagination: PaginationOptions): Promise<SearchResult> {
+
+export type SearchPaginationOptions = Record<keyof PickByType<NetworkSearchResult, ItemsResponse<any, true>>, PaginationOptions>;
+
+export async function search(query: string, networks: Network[], pagination: SearchPaginationOptions): Promise<SearchResult> {
 	if (networks.length === 0) {
 		networks = getNetworks();
 	}
@@ -60,6 +63,7 @@ export async function search(query: string, networks: Network[], pagination: Pag
 						page: 1,
 						pageSize: 10, // TODO constant
 						hasNextPage: false,
+						totalPageCount: 1
 					},
 					totalCount: 1
 				},
@@ -83,43 +87,31 @@ export async function search(query: string, networks: Network[], pagination: Pag
 		} = nonEmptyNetworkResults[0];
 
 		return {
-			accountItems: itemsToSearchResultItems(accounts),
-			blockItems: itemsToSearchResultItems(blocks),
-			extrinsicItems: itemsToSearchResultItems(extrinsics),
-			eventItems: itemsToSearchResultItems(events),
-			accountsTotalCount: accounts.totalCount,
-			blocksTotalCount: blocks.totalCount,
-			extrinsicsTotalCount: extrinsics.totalCount,
-			eventsTotalCount: events.totalCount,
+			accounts: itemsToSearchResultItems(accounts),
+			blocks: itemsToSearchResultItems(blocks),
+			extrinsics: itemsToSearchResultItems(extrinsics),
+			events: itemsToSearchResultItems(events),
 			totalCount
 		};
 	}
 
-	const accountItems = networkResultsToSearchResultItems<Account>(nonEmptyNetworkResults, "accounts", pagination);
-	const blockItems = networkResultsToSearchResultItems<Block>(nonEmptyNetworkResults, "blocks", pagination);
-	const extrinsicItems = networkResultsToSearchResultItems<Extrinsic>(nonEmptyNetworkResults, "extrinsics", pagination);
-	const eventItems = networkResultsToSearchResultItems<Event>(nonEmptyNetworkResults, "events", pagination);
+	const accounts = networkResultsToSearchResultItems<Account>(nonEmptyNetworkResults, "accounts", pagination.accounts);
+	const blocks = networkResultsToSearchResultItems<Block>(nonEmptyNetworkResults, "blocks", pagination.blocks);
+	const extrinsics = networkResultsToSearchResultItems<Extrinsic>(nonEmptyNetworkResults, "extrinsics", pagination.extrinsics);
+	const events = networkResultsToSearchResultItems<Event>(nonEmptyNetworkResults, "events", pagination.events);
 
-	const accountsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.accounts.totalCount, 0);
-	const blocksTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.blocks.totalCount, 0);
-	const extrinsicsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.extrinsics.totalCount, 0);
-	const eventsTotalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.events.totalCount, 0);
-	const totalCount = nonEmptyNetworkResults.reduce((total, result) => total + result.totalCount, 0);
+	const totalCount = accounts.totalCount + blocks.totalCount + extrinsics.totalCount + events.totalCount;
 
-	warningAssert(!isHex(query) || blocksTotalCount <= 1, {
+	warningAssert(!isHex(query) || blocks.totalCount <= 1, {
 		message: "Block hashes should be unique",
 		query
 	});
 
 	return {
-		accountItems,
-		blockItems,
-		extrinsicItems,
-		eventItems,
-		accountsTotalCount,
-		blocksTotalCount,
-		extrinsicsTotalCount,
-		eventsTotalCount,
+		accounts,
+		blocks,
+		extrinsics,
+		events,
 		totalCount
 	};
 }
@@ -138,7 +130,7 @@ type NetworkSearchResult = {
 async function searchNetwork(
 	network: Network,
 	query: string,
-	pagination: PaginationOptions,
+	pagination: SearchPaginationOptions,
 	fetchAll = false
 ) {
 	if (!hasSupport(network.name, "explorer-squid")) {
@@ -160,12 +152,13 @@ async function searchNetwork(
 async function searchNetworkByHash(
 	network: Network,
 	hash: string,
-	pagination: PaginationOptions,
+	pagination: SearchPaginationOptions,
 ) {
 	const blocksFilter: BlocksFilter = {hash_eq: hash};
 	const extrinsicsFilter: ExtrinsicsFilter = {hash_eq: hash};
 
-	const {first, after} = paginationToConnectionCursor(pagination);
+	const blocksCursor = paginationToConnectionCursor(pagination.blocks);
+	const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
 
 	const response = await fetchExplorerSquid<{
 		blocks: ItemsConnection<ExplorerSquidBlock, true>,
@@ -173,12 +166,14 @@ async function searchNetworkByHash(
 	}>(
 		network.name,
 		`query (
-			$first: Int!,
-			$after: String
+			$blocksFirst: Int!,
+			$blocksAfter: String,
 			$blocksFilter: BlockWhereInput,
+			$extrinsicsFirst: Int!,
+			$extrinsicsAfter: String,
 			$extrinsicsFilter: ExtrinsicWhereInput,
 		) {
-			blocks: blocksConnection(first: $first, after: $after, where: $blocksFilter, orderBy: id_ASC) {
+			blocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -198,7 +193,7 @@ async function searchNetworkByHash(
 				}
 				totalCount
 			},
-			extrinsics: extrinsicsConnection(first: $first, after: $after, where: $extrinsicsFilter, orderBy: id_ASC) {
+			extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {
 				edges {
 					node {
 						id
@@ -233,9 +228,11 @@ async function searchNetworkByHash(
 			}
 		}`,
 		{
-			first,
-			after,
+			blocksFirst: blocksCursor.first,
+			blocksAfter: blocksCursor.after,
 			blocksFilter: blocksFilterToExplorerSquidFilter(blocksFilter),
+			extrinsicsFirst: extrinsicsCursor.first,
+			extrinsicsAfter: extrinsicsCursor.after,
 			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
 		}
 	);
@@ -245,10 +242,10 @@ async function searchNetworkByHash(
 
 	const result: NetworkSearchResult = {
 		network,
-		accounts: emptyResponse(),
+		accounts: emptyItemsResponse(0),
 		blocks,
 		extrinsics,
-		events: emptyResponse(),
+		events: emptyItemsResponse(0),
 		totalCount: blocks.totalCount + extrinsics.totalCount
 	};
 
@@ -293,10 +290,10 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 
 	const result: NetworkSearchResult = {
 		network,
-		accounts: emptyResponse(),
+		accounts: emptyItemsResponse(0),
 		blocks,
-		extrinsics: emptyResponse(),
-		events: emptyResponse(),
+		extrinsics: emptyItemsResponse(0),
+		events: emptyItemsResponse(0),
 		totalCount: blocks.totalCount
 	};
 
@@ -316,13 +313,14 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 			pageInfo: {
 				page: 1,
 				pageSize: 10,
-				hasNextPage: false
+				hasNextPage: false,
+				totalPageCount: 1
 			},
 			totalCount: 1
 		},
-		blocks: emptyResponse(),
-		extrinsics: emptyResponse(),
-		events: emptyResponse(),
+		blocks: emptyItemsResponse(0),
+		extrinsics: emptyItemsResponse(0),
+		events: emptyItemsResponse(0),
 		totalCount: 1
 	};
 
@@ -332,7 +330,7 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 async function searchNetworkByName(
 	network: Network,
 	query: string,
-	pagination: PaginationOptions,
+	pagination: SearchPaginationOptions,
 	fetchAll: boolean,
 ) {
 	const extrinsicName = await normalizeExtrinsicName(network.name, query);
@@ -385,7 +383,8 @@ async function searchNetworkByName(
 		}
 	}
 
-	const {first, after} = paginationToConnectionCursor(pagination);
+	const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
+	const eventsCursor = paginationToConnectionCursor(pagination.events);
 
 	const response = await fetchExplorerSquid<{
 		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
@@ -393,12 +392,14 @@ async function searchNetworkByName(
 	}>(
 		network.name,
 		`query (
-			$first: Int!,
-			$after: String
-			$eventsFilter: EventWhereInput,
+			$extrinsicsFirst: Int!,
+			$extrinsicsAfter: String,
 			$extrinsicsFilter: ExtrinsicWhereInput,
+			$eventsFirst: Int!,
+			$eventsAfter: String,
+			$eventsFilter: EventWhereInput,
 		) {
-			extrinsics: extrinsicsConnection(first: $first, after: $after, where: $extrinsicsFilter, orderBy: id_DESC) {
+			extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_DESC) {
 				edges {
 					node {
 						id
@@ -430,7 +431,7 @@ async function searchNetworkByName(
 					startCursor
 				}
 			}
-			events: eventsConnection(first: $first, after: $after, where: $eventsFilter, orderBy: id_DESC) {
+			events: eventsConnection(first: $eventsFirst, after: $eventsAfter, where: $eventsFilter, orderBy: id_DESC) {
 				edges {
 					node {
 						id
@@ -459,10 +460,13 @@ async function searchNetworkByName(
 			}
 		}`,
 		{
-			first,
-			after,
+			extrinsicsFirst: extrinsicsCursor.first,
+			extrinsicsAfter: extrinsicsCursor.after,
 			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
+			eventsFirst: eventsCursor.first,
+			eventsAfter: eventsCursor.after,
 			eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
+
 		}
 	);
 
@@ -486,8 +490,8 @@ async function searchNetworkByName(
 
 	const result: NetworkSearchResult = {
 		network,
-		accounts: emptyResponse(),
-		blocks: emptyResponse(),
+		accounts: emptyItemsResponse(0),
+		blocks: emptyItemsResponse(0),
 		extrinsics: {
 			...extrinsics,
 			totalCount: extrinsicsTotalCount
@@ -502,42 +506,55 @@ async function searchNetworkByName(
 	return result;
 }
 
-function itemsToSearchResultItems<T extends {network: Network}>(items: ItemsResponse<T, true>): ItemsResponse<SearchResultItem<T>, true> {
+function itemsToSearchResultItems<T extends {id: string, network: Network}>(items: ItemsResponse<T, true>): ItemsResponse<SearchResultItem<T>, true> {
 	return {
 		...items,
 		data: items.data.map(it => ({
+			id: `${it.network}-${it.id}`,
 			network: it.network,
 			data: it
 		})),
 	};
 }
 
-function networkResultsToSearchResultItems<T>(
+function networkResultsToSearchResultItems<T extends {id: string, network: Network}>(
 	networkResults: NetworkSearchResult[],
 	itemsType: keyof PickByType<NetworkSearchResult, ItemsResponse<T, true>>,
 	pagination: PaginationOptions
 ): ItemsResponse<SearchResultItem<T>, true> {
-	const data = networkResults.flatMap<SearchResultItem<T>>((result) => {
-		const {data, totalCount} = result[itemsType];
-
-		if (totalCount === 0) {
-			return [];
+	const data: SearchResultItem<T>[] = [];
+	let totalCount = 0;
+
+	for (const result of networkResults) {
+		const items = result[itemsType];
+
+		if (items.totalCount === 1) {
+			const item = items.data[0] as unknown as T;
+
+			data.push({
+				id: `${result.network.name}-${item.id}`,
+				network: result.network,
+				data: item,
+			});
+		} else if (totalCount > 1) {
+			data.push({
+				id: `${result.network.name}-grouped`,
+				network: result.network,
+				groupedCount: items.totalCount > 1 ? items.totalCount : undefined
+			});
 		}
 
-		return [{
-			network: result.network,
-			data: totalCount === 1 ? data[0] as T : undefined,
-			groupedCount: totalCount > 1 ? totalCount : undefined
-		}];
-	});
+		totalCount += items.totalCount;
+	}
 
 	return {
 		data: data.slice((pagination.page - 1) * pagination.pageSize, pagination.page * pagination.pageSize),
 		pageInfo: {
 			page: pagination.page,
 			pageSize: pagination.pageSize,
-			hasNextPage: pagination.page * pagination.pageSize < data.length
+			hasNextPage: pagination.page * pagination.pageSize < data.length,
+			totalPageCount: Math.ceil(data.length / pagination.pageSize)
 		},
-		totalCount: data.length
+		totalCount
 	};
 }
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index 20be4438..a6435029 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -6,6 +6,7 @@ import { Transfer } from "../model/transfer";
 
 import { decodeAddress } from "../utils/address";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
+import { emptyItemsResponse } from "../utils/itemsResponse";
 import { rawAmountToDecimal } from "../utils/number";
 
 import { fetchArchive, fetchMainSquid } from "./fetchService";
@@ -26,15 +27,7 @@ export async function getTransfers(
 		return getMainSquidTransfers(network, filter, order, pagination);
 	}
 
-	return {
-		data: [],
-		pageInfo: {
-			page: 1,
-			pageSize: 10, // TODO constant
-			hasNextPage: false,
-		},
-		totalCount: 0,
-	};
+	return emptyItemsResponse();
 }
 
 /*** PRIVATE ***/
diff --git a/src/utils/equal.ts b/src/utils/equal.ts
new file mode 100644
index 00000000..fe863da3
--- /dev/null
+++ b/src/utils/equal.ts
@@ -0,0 +1,3 @@
+export function isDeepEqual(a: any, b: any) {
+	return JSON.stringify(a) === JSON.stringify(b);
+}
diff --git a/src/utils/itemsConnection.ts b/src/utils/itemsConnection.ts
index f8888352..b864c179 100644
--- a/src/utils/itemsConnection.ts
+++ b/src/utils/itemsConnection.ts
@@ -5,9 +5,12 @@ import { PaginationOptions } from "../model/paginationOptions";
 export function paginationToConnectionCursor(pagination: PaginationOptions) {
 	const offset = (pagination.page - 1) * pagination.pageSize;
 
+	const first = pagination.pageSize;
+	const after = offset === 0 ? null : offset.toString();
+
 	return {
-		after: offset === 0 ? null : offset.toString(),
-		first: pagination.pageSize
+		first,
+		after
 	};
 }
 
@@ -22,18 +25,23 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 		data.push(await transformNode(edge.node, ...additionalArgs));
 	}
 
-	const startIndex = parseInt(connection.pageInfo.startCursor) - 1;
-	const endIndex = parseInt(connection.pageInfo.endCursor); // non-inclusive
+	const startIndex = parseInt(connection.pageInfo.startCursor || "1") - 1;
+	const endIndex = parseInt(connection.pageInfo.endCursor || "1"); // non-inclusive
 
 	const pageSize = (endIndex - startIndex);
 	const page = Math.floor(startIndex / pageSize) + 1;
 
+	const totalPageCount = connection.totalCount
+		? Math.ceil(connection.totalCount / pageSize)
+		: undefined;
+
 	return {
 		data,
 		pageInfo: {
 			page,
 			pageSize,
 			hasNextPage: connection.pageInfo.hasNextPage,
+			totalPageCount
 		},
 		totalCount: connection.totalCount
 	} as ItemsResponse<R, C>;
diff --git a/src/utils/itemsResponse.ts b/src/utils/itemsResponse.ts
index 23b44e0d..b52802dd 100644
--- a/src/utils/itemsResponse.ts
+++ b/src/utils/itemsResponse.ts
@@ -1,13 +1,16 @@
 import { ItemsResponse } from "../model/itemsResponse";
 
-export function emptyResponse(): ItemsResponse<never, true> {
+export function emptyItemsResponse(totalCount: number): ItemsResponse<never, true>
+export function emptyItemsResponse(totalCount?: undefined): ItemsResponse<never, false>
+export function emptyItemsResponse(totalCount?: number): ItemsResponse<never> {
 	return {
 		data: [],
 		pageInfo: {
 			page: 1,
 			pageSize: 10, // TODO constant
 			hasNextPage: false,
+			totalPageCount: 0
 		},
-		totalCount: 0,
+		totalCount,
 	};
 }
diff --git a/src/utils/router.ts b/src/utils/router.ts
new file mode 100644
index 00000000..9ec30a00
--- /dev/null
+++ b/src/utils/router.ts
@@ -0,0 +1,24 @@
+import { Location, RouteObject, matchRoutes } from "react-router-dom";
+
+export function setLocationParams(location: Location, newParams: Record<string, string>, routes: RouteObject[]) {
+	const match = matchRoutes(routes, location);
+
+	if (!match) {
+		return;
+	}
+
+	const pathPattern = match.map(it => it.route.path).join("/").replace(/\/+/g, "/");
+
+	const currentParams = match[match.length - 1]?.params || {};
+
+	const paramEntries = Object.entries({
+		...currentParams,
+		...newParams
+	});
+
+	const path = paramEntries.reduce((path, [param, value]) => {
+		return path.replace(new RegExp(`:${param}\\??`), value || "");
+	}, pathPattern);
+
+	return path;
+}

From a44ea0c6f7ada2cea7e1452a68822a8e925744ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 31 Oct 2023 16:30:08 +0100
Subject: [PATCH 12/21] refactor errors & redesign search results header

---
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 src/components/ErrorMessage.tsx               |  33 ++-
 src/components/InfoTable.tsx                  |   6 +-
 src/components/ItemsTable.tsx                 |   4 +-
 .../account/AccountBalancesTable.tsx          |   5 +-
 src/components/account/AccountPortfolio.tsx   |   4 +-
 src/components/network/NetworkStats.tsx       |   4 +-
 .../network/NetworkTokenDistribution.tsx      |   4 +-
 src/hooks/useResource.ts                      |  13 +-
 src/model/searchResult.ts                     |   3 +
 src/rollbar.ts                                |  24 +-
 src/router.tsx                                |   1 +
 src/screens/error.tsx                         |   3 +-
 src/screens/search.tsx                        | 206 ++++++++++++------
 src/services/searchService.ts                 |  27 ++-
 src/utils/error.ts                            |  29 ++-
 src/utils/fetchGraphql.ts                     |   8 +-
 18 files changed, 284 insertions(+), 102 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8197ac31..cda509d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "deepmerge": "^4.3.1",
         "dexie": "^3.2.4",
         "echarts": "^5.4.2",
+        "http-status-codes": "^2.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.17.0",
@@ -16520,6 +16521,11 @@
         }
       }
     },
+    "node_modules/http-status-codes": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA=="
+    },
     "node_modules/http2-wrapper": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.1.11.tgz",
@@ -39036,6 +39042,11 @@
         "micromatch": "^4.0.2"
       }
     },
+    "http-status-codes": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA=="
+    },
     "http2-wrapper": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.1.11.tgz",
diff --git a/package.json b/package.json
index 9ab89428..96998054 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "deepmerge": "^4.3.1",
     "dexie": "^3.2.4",
     "echarts": "^5.4.2",
+    "http-status-codes": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 3314bbff..f60784df 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useMemo } from "react";
 import { Alert, AlertProps, AlertTitle } from "@mui/material";
 import { css } from "@emotion/react";
+import { useRollbar } from "@rollbar/react";
 
 const alertStyle = css`
 	padding: 16px 22px;
@@ -25,12 +26,34 @@ const detailsStyle = css`
 
 export type ErrorMessageProps = AlertProps & {
 	message: ReactNode;
-	details?: ReactNode;
+	details?: unknown|unknown[];
+	report?: boolean;
 	showReported?: boolean;
 }
 
 export const ErrorMessage = (props: ErrorMessageProps) => {
-	const {message, details, showReported, ...alertProps} = props;
+	const {message, details, report, showReported = report, ...alertProps} = props;
+
+	const rollbar = useRollbar();
+
+	const errors = useMemo<unknown[]>(
+		() => Array.isArray(details) ? details : details ? [details] : [],
+		[details]
+	);
+
+	const detailsContent = useMemo(() => {
+		return errors
+			.map(it => it instanceof Error ? it.message : "Unknown error")
+			.join("\n\n");
+	}, [errors]);
+
+	console.log("details", detailsContent);
+
+	useEffect(() => {
+		if (report) {
+			errors.forEach(it => rollbar.error(it as any));
+		}
+	}, [errors, report, rollbar]);
 
 	return (
 		<Alert severity="error" css={alertStyle} data-test="error" {...alertProps}>
@@ -40,10 +63,10 @@ export const ErrorMessage = (props: ErrorMessageProps) => {
 					This error is logged. No need to report it.
 				</div>
 			}
-			{details &&
+			{detailsContent &&
 				<details css={detailsStyle}>
 					<summary>Details</summary>
-					<pre>{details}</pre>
+					<pre>{detailsContent}</pre>
 				</details>
 			}
 		</Alert>
diff --git a/src/components/InfoTable.tsx b/src/components/InfoTable.tsx
index cb623b9b..6130e5f1 100644
--- a/src/components/InfoTable.tsx
+++ b/src/components/InfoTable.tsx
@@ -136,7 +136,7 @@ export type InfoTableProps<T extends object, A extends any[] = []> = TableContai
 	additionalData?: A;
 	loading?: boolean;
 	notFound?: boolean;
-	notFoundMessage?: string;
+	notFoundMessage?: ReactNode;
 	error?: any;
 	errorMessage?: string;
 	children: ReactElement<InfoTableAttributeProps<T, A>>|(ReactElement<InfoTableAttributeProps<T, A>>|false|undefined|null)[];
@@ -167,8 +167,8 @@ export const InfoTable = <T extends object, A extends any[] = []>(props: InfoTab
 		return (
 			<ErrorMessage
 				message={errorMessage}
-				details={error.message}
-				showReported
+				details={error}
+				report
 			/>
 		);
 	}
diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index dd2c1c85..22b1693e 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -131,8 +131,8 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		return (
 			<ErrorMessage
 				message={errorMessage}
-				details={error.message}
-				showReported
+				details={error}
+				report
 			/>
 		);
 	}
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index cbcf6d96..0b38b2ab 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -181,9 +181,10 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 							}
 							{balance.error &&
 								<ErrorMessage
-									message="Unexpected error occured while fetching data"
-									details={balance.error.message}
 									data-test={`${balance.network.name}-balance-error`}
+									message="Unexpected error occured while fetching data"
+									details={balance.error}
+									report
 								/>
 							}
 						</>
diff --git a/src/components/account/AccountPortfolio.tsx b/src/components/account/AccountPortfolio.tsx
index b2934f04..9bfb3d84 100644
--- a/src/components/account/AccountPortfolio.tsx
+++ b/src/components/account/AccountPortfolio.tsx
@@ -123,8 +123,8 @@ export const AccountPortfolio = (props: AccountPortfolioProps) => {
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={balances.error.message}
-				showReported
+				details={balances.error}
+				report
 			/>
 		);
 	}
diff --git a/src/components/network/NetworkStats.tsx b/src/components/network/NetworkStats.tsx
index f9ea3e07..8b4a9496 100644
--- a/src/components/network/NetworkStats.tsx
+++ b/src/components/network/NetworkStats.tsx
@@ -99,8 +99,8 @@ export const NetworkStats = (props: NetworkInfoTableProps) => {
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={stats.error.message}
-				showReported
+				details={stats.error}
+				report
 			/>
 		);
 	}
diff --git a/src/components/network/NetworkTokenDistribution.tsx b/src/components/network/NetworkTokenDistribution.tsx
index c5add34a..50f661fa 100644
--- a/src/components/network/NetworkTokenDistribution.tsx
+++ b/src/components/network/NetworkTokenDistribution.tsx
@@ -63,8 +63,8 @@ export const NetworkTokenDistribution = (props: NetworkTokenDistributionProps) =
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={stats.error.message}
-				showReported
+				details={stats.error}
+				report
 			/>
 		);
 	}
diff --git a/src/hooks/useResource.ts b/src/hooks/useResource.ts
index 78b5f92f..dae70769 100644
--- a/src/hooks/useResource.ts
+++ b/src/hooks/useResource.ts
@@ -1,9 +1,8 @@
 import { useEffect, useMemo } from "react";
 import useSwr, { SWRConfiguration } from "swr";
-import { useRollbar } from "@rollbar/react";
 
 import { Resource } from "../model/resource";
-import { DataError } from "../utils/error";
+import { NonFatalError } from "../utils/error";
 
 export interface UseResourceOptions extends SWRConfiguration {
 	/**
@@ -25,8 +24,6 @@ export function useResource<T = any, F extends any[] = any[]>(
 	args: F,
 	options: UseResourceOptions = {}
 ) {
-	const rollbar = useRollbar();
-
 	const {skip, refresh, refreshInterval = 3000, ...swrOptions} = options;
 
 	const swrKey = !skip
@@ -39,13 +36,7 @@ export function useResource<T = any, F extends any[] = any[]>(
 	});
 
 	useEffect(() => {
-		if (!error) {
-			return;
-		}
-
-		if (error && error instanceof DataError) {
-			rollbar.error(error);
-		} else {
+		if (error && !(error instanceof NonFatalError)) {
 			throw error;
 		}
 	}, [error]);
diff --git a/src/model/searchResult.ts b/src/model/searchResult.ts
index 62777053..c8f0790d 100644
--- a/src/model/searchResult.ts
+++ b/src/model/searchResult.ts
@@ -1,3 +1,5 @@
+import { NetworkError } from "../utils/error";
+
 import { ItemsResponse } from "./itemsResponse";
 import { SearchResultItem } from "./searchResultItem";
 
@@ -11,5 +13,6 @@ export type SearchResult = {
 	blocks: ItemsResponse<SearchResultItem<Block>, true>
 	extrinsics: ItemsResponse<SearchResultItem<Extrinsic>, true>
 	events: ItemsResponse<SearchResultItem<Event>, true>
+	errors?: NetworkError[];
 	totalCount: number;
 }
diff --git a/src/rollbar.ts b/src/rollbar.ts
index 2bbbc12f..e75d2138 100644
--- a/src/rollbar.ts
+++ b/src/rollbar.ts
@@ -22,4 +22,26 @@ export const rollbarConfig: Configuration = {
 	enabled: config.rollbar.enabled
 };
 
-export const rollbar = new Rollbar(rollbarConfig);
+const rollbar = new Rollbar(rollbarConfig);
+
+if (!config.rollbar.enabled && window.location.hostname === "localhost") {
+	// if the rollbar is disabled on localhost, print
+	// the message about reporting to the console
+	// so it is obvious when it would happen
+
+	const notifier = (rollbar as any).client.notifier;
+	const log = notifier.log;
+
+	notifier.log = function (item: any, callback: any) {
+		console.warn(`The following ${item.level} item would be reported to Rollbar`);
+
+		if (!item._isUncaught) {
+			const consoleAction = ["error", "critical"].includes(item.level) ? "error" : "warn";
+			console[consoleAction](...item._originalArgs);
+		}
+
+		log.apply(this, [item, callback]);
+	};
+}
+
+export { rollbar };
diff --git a/src/router.tsx b/src/router.tsx
index aca04ddb..d758e13f 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -29,6 +29,7 @@ export const routes: RouteObject[] = [
 			{
 				path: "search/:tab?",
 				element: <SearchPage />,
+				errorElement: <ErrorPage />,
 			},
 			{
 				id: "network",
diff --git a/src/screens/error.tsx b/src/screens/error.tsx
index 05fa72c4..521442fe 100644
--- a/src/screens/error.tsx
+++ b/src/screens/error.tsx
@@ -20,7 +20,8 @@ export const ErrorPage = () => {
 				<CardHeader>Error</CardHeader>
 				<ErrorMessage
 					message="Unexpected error occured while loading page"
-					details={("message" in (error as any)) ? (error as any).message : undefined}
+					details={error}
+					showReported
 				/>
 			</Card>
 		</>
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index fda0e786..417e2946 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { css } from "@emotion/react";
 
@@ -36,6 +36,51 @@ const queryStyle = css`
 	}
 `;
 
+const xxStyle = css`
+	line-height: 38px;
+`;
+
+const queryStyle2 = css`
+	padding: 4px 8px;
+	margin: 0 2px;
+
+	font-family: inherit;
+	background-color: #f5f5f5;
+	border-radius: 6px;
+
+	&::before {
+		content: open-quote;
+	}
+
+	&::after {
+		content: close-quote;
+	}
+`;
+
+const networkStyle = css`
+	padding: 4px 8px;
+	background-color: #f5f5f5;
+	border-radius: 8px;
+
+	white-space: nowrap;
+`;
+
+const iconStyle = css`
+	width: 20px;
+	height: 20px;
+
+	border-radius: 0px;
+	margin-right: 4px;
+
+	vertical-align: text-bottom;
+	position: relative;
+	top: -1px;
+`;
+
+const errorStyle = css`
+	margin-top: 32px;
+`;
+
 const loadingStyle = css`
 	text-align: center;
 	word-break: break-all;
@@ -146,76 +191,107 @@ export const SearchPage = () => {
 			<Card>
 				<ErrorMessage
 					message={<>Unexpected error occured while searching for <span css={queryStyle}>{query}</span></>}
-					details={searchResult.error.message}
-					showReported
+					details={searchResult.error}
+					report
 				/>
 			</Card>
 		);
 	}
 
 	return (
-		<Card>
-			<CardHeader>
-				Search results for query <span css={queryStyle}>{query}</span>
-			</CardHeader>
-			<TabbedContent currentTab={tab} onTabChange={setTab}>
-				<TabPane
-					value="accounts"
-					label="Accounts"
-					count={searchResult.accounts.totalCount}
-					loading={searchResult.accounts.loading}
-					error={searchResult.accounts.error}
-					hide={searchResult.accounts.totalCount === 0}
-				>
-					<AccountSearchResultsTable
-						accounts={searchResult.accounts}
-						query={query}
-						onPageChange={setPage}
-					/>
-				</TabPane>
-				<TabPane
-					value="blocks"
-					label="Blocks"
-					count={searchResult.blocks.totalCount}
-					loading={searchResult.blocks.loading}
-					error={searchResult.blocks.error}
-					hide={searchResult.blocks.totalCount === 0}
-				>
-					<BlockSearchResultsTable
-						blocks={searchResult.blocks}
-						query={query}
-						onPageChange={setPage}
-					/>
-				</TabPane>
-				<TabPane
-					value="extrinsics"
-					label="Extrinsics"
-					count={searchResult.extrinsics.totalCount}
-					loading={searchResult.extrinsics.loading}
-					error={searchResult.extrinsics.error}
-					hide={searchResult.extrinsics.totalCount === 0}
-				>
-					<ExtrinsicSearchResultsTable
-						extrinsics={searchResult.extrinsics}
-						query={query}
-						onPageChange={setPage}
-					/>
-				</TabPane>
-				<TabPane
-					value="events"
-					label="Events"
-					count={searchResult.events.totalCount}
-					loading={searchResult.events.loading}
-					error={searchResult.events.error}
-					hide={searchResult.events.totalCount === 0}
-				>
-					<EventSearchResultsTable
-						events={searchResult.events}
-						query={query}
-						onPageChange={setPage}
+		<>
+			<Card>
+				<CardHeader>
+					Search results
+				</CardHeader>
+				<div css={xxStyle}>
+					For query <code css={queryStyle2}>{query}</code> in {" "}
+					{networkNames.length === 0 && <span>all networks.</span>}
+					{networkNames.length > 0 && (
+						<>
+							{getNetworks(networkNames).slice(0, 5).map((it, index) =>
+								<Fragment key={it.name}>
+									<span css={networkStyle}>
+										<img src={it.icon} css={iconStyle} /> {it.displayName}
+									</span>
+									{index <= networkNames.length - 3 && <span>, </span>}
+									{index === networkNames.length - 2 && <span> and </span>}
+								</Fragment>
+							)} network{networkNames.length > 1 && <span>s</span>}.
+						</>
+					)}
+				</div>
+				{searchResult.data?.errors && searchResult.data?.errors.length > 0 && (
+					<ErrorMessage
+						css={errorStyle}
+						message={<>Unexpected error occured while searching some networks</>}
+						details={searchResult.data.errors}
+						report
 					/>
-				</TabPane>
-			</TabbedContent>
-		</Card>
+				)}
+			</Card>
+			{searchResult.data &&
+				<Card>
+					<TabbedContent currentTab={tab} onTabChange={setTab}>
+						<TabPane
+							value="accounts"
+							label="Accounts"
+							count={searchResult.accounts.totalCount}
+							loading={searchResult.accounts.loading}
+							error={searchResult.accounts.error}
+							hide={searchResult.accounts.totalCount === 0}
+						>
+							<AccountSearchResultsTable
+								accounts={searchResult.accounts}
+								query={query}
+								onPageChange={setPage}
+							/>
+						</TabPane>
+						<TabPane
+							value="blocks"
+							label="Blocks"
+							count={searchResult.blocks.totalCount}
+							loading={searchResult.blocks.loading}
+							error={searchResult.blocks.error}
+							hide={searchResult.blocks.totalCount === 0}
+						>
+							<BlockSearchResultsTable
+								blocks={searchResult.blocks}
+								query={query}
+								onPageChange={setPage}
+							/>
+						</TabPane>
+						<TabPane
+							value="extrinsics"
+							label="Extrinsics"
+							count={searchResult.extrinsics.totalCount}
+							loading={searchResult.extrinsics.loading}
+							error={searchResult.extrinsics.error}
+							hide={searchResult.extrinsics.totalCount === 0}
+						>
+							<ExtrinsicSearchResultsTable
+								extrinsics={searchResult.extrinsics}
+								query={query}
+								onPageChange={setPage}
+							/>
+						</TabPane>
+						<TabPane
+							value="events"
+							label="Events"
+							count={searchResult.events.totalCount}
+							loading={searchResult.events.loading}
+							error={searchResult.events.error}
+							hide={searchResult.events.totalCount === 0}
+						>
+							<EventSearchResultsTable
+								events={searchResult.events}
+								query={query}
+								onPageChange={setPage}
+							/>
+						</TabPane>
+					</TabbedContent>
+				</Card>
+			}
+		</>
 	);
 };
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 3430ce02..851cf4a8 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -11,21 +11,22 @@ import { Extrinsic } from "../model/extrinsic";
 import { ItemsConnection } from "../model/itemsConnection";
 import { ItemsResponse } from "../model/itemsResponse";
 import { Network } from "../model/network";
+import { PaginationOptions } from "../model/paginationOptions";
+import { SearchResult } from "../model/searchResult";
+import { SearchResultItem } from "../model/searchResultItem";
 
 import { decodeAddress, encodeAddress, isAccountPublicKey, isEncodedAddress } from "../utils/address";
 import { warningAssert } from "../utils/assert";
+import { NetworkError, NonFatalError } from "../utils/error";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { emptyItemsResponse } from "../utils/itemsResponse";
+import { PickByType } from "../utils/types";
 
 import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
 import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
 import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
 import { fetchExplorerSquid } from "./fetchService";
 import { getNetwork, getNetworks, hasSupport } from "./networksService";
-import { PaginationOptions } from "../model/paginationOptions";
-import { PickByType } from "../utils/types";
-import { SearchResult } from "../model/searchResult";
-import { SearchResultItem } from "../model/searchResultItem";
 
 
 export type SearchPaginationOptions = Record<keyof PickByType<NetworkSearchResult, ItemsResponse<any, true>>, PaginationOptions>;
@@ -45,6 +46,23 @@ export async function search(query: string, networks: Network[], pagination: Sea
 		.map((it) => it.status === "fulfilled" ? it.value : undefined)
 		.filter((it): it is NetworkSearchResult => !!it);
 
+	const errors = promiseResults
+		.map((it, index) => {
+			if (it.status !== "rejected") {
+				return undefined;
+			}
+
+			if (it.reason instanceof NonFatalError) {
+				return new NetworkError(networks[index]!, it.reason);
+			}
+
+			throw it.reason;
+		})
+		.filter((it): it is NetworkError => !!it);
+
+	console.log("results", networkResults);
+	console.log("errors", errors);
+
 	let nonEmptyNetworkResults = networkResults.filter((result) => result.totalCount > 0);
 
 	if (isAccountPublicKey(query) && nonEmptyNetworkResults.length === 0) {
@@ -112,6 +130,7 @@ export async function search(query: string, networks: Network[], pagination: Sea
 		blocks,
 		extrinsics,
 		events,
+		errors,
 		totalCount
 	};
 }
diff --git a/src/utils/error.ts b/src/utils/error.ts
index b486078f..1bb807c5 100644
--- a/src/utils/error.ts
+++ b/src/utils/error.ts
@@ -1,7 +1,34 @@
 import { CustomError } from "ts-custom-error";
+import { getReasonPhrase } from "http-status-codes";
 
-export class DataError extends CustomError {
+import { Network } from "../model/network";
+
+export class NonFatalError extends CustomError {
+	constructor(message: string) {
+		super(message);
+	}
+}
+
+export class DataError extends NonFatalError {
 	constructor(message: string) {
 		super(message);
 	}
 }
+
+export class FetchError extends NonFatalError {
+	constructor(
+		public readonly url: string,
+		public readonly code: number
+	) {
+		super(`Cannot fetch ${url}: HTTP ${code} (${getReasonPhrase(code)})`);
+	}
+}
+
+export class NetworkError extends NonFatalError {
+	constructor(
+		public readonly network: Network,
+		public readonly error: any
+	) {
+		super(`${network.displayName}: ${"message" in error ? error.message : "Unknown error"}`);
+	}
+}
diff --git a/src/utils/fetchGraphql.ts b/src/utils/fetchGraphql.ts
index e9e61427..d1213a3b 100644
--- a/src/utils/fetchGraphql.ts
+++ b/src/utils/fetchGraphql.ts
@@ -1,4 +1,4 @@
-import { DataError } from "./error";
+import { DataError, FetchError } from "./error";
 
 export async function fetchGraphql<T = any>(
 	url: string,
@@ -18,6 +18,12 @@ export async function fetchGraphql<T = any>(
 		}),
 	});
 
+	const statusCode = response.status;
+
+	if (statusCode !== 200) {
+		throw new FetchError(url, statusCode);
+	}
+
 	const jsonResult = await response.json();
 
 	if (jsonResult.errors && !jsonResult.data) {

From 112becad54d13d1d27bcbeca6dba2317d86ac3b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Wed, 8 Nov 2023 12:34:51 +0100
Subject: [PATCH 13/21] multiple networks select

---
 src/components/NetworkSelect.tsx | 296 ++++++++++++++++++++++++-------
 src/components/SearchInput.tsx   |  87 +++++----
 src/components/TabbedContent.tsx |  10 +-
 src/screens/home.tsx             |   5 +-
 src/screens/search.tsx           |  25 +--
 5 files changed, 290 insertions(+), 133 deletions(-)

diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
index 1dac9a4b..c0589f5e 100644
--- a/src/components/NetworkSelect.tsx
+++ b/src/components/NetworkSelect.tsx
@@ -1,30 +1,61 @@
 /** @jsxImportSource @emotion/react */
-import { useCallback, useEffect } from "react";
-import { Divider, ListItemIcon, ListItemText, ListSubheader, MenuItem, Select, SelectProps } from "@mui/material";
-import { BlurOn as AllIcon } from "@mui/icons-material";
-import { css } from "@emotion/react";
+import { useCallback, useState } from "react";
+import { Button, ButtonProps, Checkbox, Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material";
+import { grey } from "@mui/material/colors";
+import { BlurOn as AllIcon, ArrowDropDown } from "@mui/icons-material";
+import { Theme, css } from "@emotion/react";
 
-import { useNetworks } from "../hooks/useNetworks";
 import { useNetworkGroups } from "../hooks/useNetworkGroups";
+import { Network } from "../model/network";
 
-const selectStyle = css`
-	&.MuiInputBase-root {
-		.MuiSelect-select {
-			display: flex;
-			align-items: center;
-			padding-left: 16px;
-		}
+import { Link } from "./Link";
+
+const buttonStyle = css`
+	display: flex;
+	gap: 12px;
+
+	padding-left: 16px;
+	padding-right: 8px;
+
+	flex: 1 0 auto;
+
+	border-radius: 8px;
+	border: solid 1px #c4cdd5;
+	border-right: none;
+
+	font-size: 1rem;
+	font-weight: 400;
+
+	&, &:hover {
+		background-color: ${grey[100]};
 	}
+`;
 
-	.MuiListItemIcon-root {
-		min-width: 36px;
+const headerStyle = css`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 
-		img {
-			width: 24px;
-			height: 24px;
-		}
+	padding-top: 12px;
+	padding-bottom: 20px;
+
+	line-height: 1.2;
+
+	a {
+		font-weight: 400;
+		cursor: pointer;
+	}
+`;
+
+const menuItemStyle = css`
+	.MuiListItemIcon-root {
+		min-width: 0px;
+		margin-right: 16px;
 	}
 
+	.MuiListItemText-root {
+		margin-right: 24px;
+	}
 `;
 
 const iconStyle = css`
@@ -34,63 +65,192 @@ const iconStyle = css`
 	border-radius: 0px;
 `;
 
-type NetworkSelectProps = Omit<SelectProps, "value" | "onChange"> & {
-	value: string | undefined;
-	onChange: (value: string, isUserAction: boolean) => void;
-};
+const checkboxStyle = css`
+	margin: -6px -16px;
+	margin-left: auto;
+
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-right: 16px;
+
+	font-weight: 400;
+
+	&::before {
+		content: " ";
+		position: absolute;
+		left: 0;
+		height: 65%;
+		width: 1px;
+		background-color: ${grey[400]};
+	}
 
-const NetworkSelect = (props: NetworkSelectProps) => {
-	const { value, onChange, ...selectProps } = props;
+	.MuiMenuItem-root:not(:hover) &::before {
+		display: none;
+	}
+`;
+
+interface NetworkSelectProps extends Omit<ButtonProps, "value" | "onChange"> {
+	value: Network[];
+	onChange: (value: Network[], isUserAction: boolean) => void;
+}
+
+export const NetworkSelect = (props: NetworkSelectProps) => {
+	const { value, onChange, ...buttonProps } = props;
 
 	const networkGroups = useNetworkGroups();
 
-	useEffect(() => {
-		if (!value) {
-			onChange("*", false);
+	const [anchorEl, setAnchorEl] = useState<HTMLElement>();
+
+	const open = !!anchorEl;
+
+	const handleClose = useCallback(() => setAnchorEl(undefined), []);
+
+	const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+
+	const setSelection = useCallback((networks: Network[]) => {
+		const newValue = [];
+
+		for (const networkGroup of networkGroups) {
+			for (const network of networkGroup.networks) {
+				if (networks.includes(network)) {
+					newValue.push(network);
+				}
+			}
 		}
-	}, [value, onChange]);
 
-	const handleNetworkChange = useCallback(
-		(e: any) => {
-			onChange && onChange(e.target.value, true);
-		},
-		[onChange]
-	);
+		onChange?.(newValue, true);
+		handleClose();
+	}, [onChange]);
+
+	const addSelection = useCallback((networks: Network[]) => {
+		const newValue = [];
+
+		for (const networkGroup of networkGroups) {
+			for (const network of networkGroup.networks) {
+				if (networks.includes(network) || value.includes(network)) {
+					newValue.push(network);
+				}
+			}
+		}
+
+		onChange?.(newValue, true);
+	}, [value, networkGroups, onChange]);
+
+	const removeSelection = useCallback((networks: Network[]) => {
+		const newValue = [];
+
+		for (const networkGroup of networkGroups) {
+			for (const network of networkGroup.networks) {
+				if (value.includes(network) && !networks.includes(network)) {
+					newValue.push(network);
+				}
+			}
+		}
+
+		onChange?.(newValue, true);
+	}, [value, networkGroups, onChange]);
+
+	console.log("value", value);
+
 
 	return (
-		<Select
-			{...selectProps}
-			onChange={handleNetworkChange}
-			value={value || ""}
-			css={selectStyle}
-		>
-			<MenuItem value="*">
-				<ListItemIcon>
-					<AllIcon css={{color: "#e6007a"}} />
-				</ListItemIcon>
-				<ListItemText>All networks</ListItemText>
-			</MenuItem>
-			<Divider />
-			{networkGroups.map((group, index) => [
-				index > 0 && <Divider />,
-				<ListSubheader key={index}>
-					{group.relayChainNetwork?.displayName || "Other"}
-					{group.relayChainNetwork && <span> and parachains</span>}
-				</ListSubheader>,
-				...group.networks.map((network) => (
-					<MenuItem key={network.name} value={network.name}>
-						<ListItemIcon>
-							<img
-								src={network.icon}
-								css={iconStyle}
-							/>
-						</ListItemIcon>
-						<ListItemText>{network.displayName}</ListItemText>
-					</MenuItem>
-				))
-			])}
-		</Select>
+		<>
+			<Button
+				{...buttonProps}
+				id="basic-button"
+				aria-controls={open ? "networks-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={handleClick}
+				css={buttonStyle}
+			>
+				{value.length === 0 && (
+					<>
+						<AllIcon css={[iconStyle, {color: "#e6007a"}]} />
+						<span>All networks</span>
+					</>
+				)}
+				{value.length === 1 && (
+					<>
+						<img src={value[0]?.icon} css={iconStyle} />
+						<span>{value[0]?.displayName}</span>
+					</>
+				)}
+				{value.length > 1 && (
+					<>
+						{value.slice(0, 3).map((network) => <img src={network.icon} css={iconStyle} />)}
+						{value.length > 3 && <span>+ {value.length - 3} other</span>}
+					</>
+				)}
+				<ArrowDropDown />
+			</Button>
+			<Menu
+				id="networks-menu"
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				MenuListProps={{
+					"aria-labelledby": "basic-button",
+				}}
+			>
+				<MenuItem
+					css={menuItemStyle}
+					selected={value.length === 0}
+					onClick={() => setSelection([])}
+				>
+					<ListItemIcon>
+						<AllIcon css={[iconStyle, {color: "#e6007a"}]} />
+					</ListItemIcon>
+					<ListItemText>All networks</ListItemText>
+				</MenuItem>
+				{networkGroups.map((group, index) => {
+					const allSelected = group.networks.every(it => value.includes(it));
+
+					return (
+						<>
+							<Divider />
+							<ListSubheader css={headerStyle} key={index}>
+								<div>
+									{group.relayChainNetwork?.displayName || "Other"}{" "}
+									{group.relayChainNetwork && <><br /><span style={{fontSize: 12}}>and parachains</span></>}
+								</div>
+								<Link
+									onClick={() => allSelected
+										? removeSelection(group.networks)
+										: addSelection(group.networks)
+									}
+								>
+									{allSelected ? "deselect" : "select"} all
+								</Link>
+							</ListSubheader>
+							{group.networks.map((network) => (
+								<MenuItem
+									css={menuItemStyle}
+									selected={value.includes(network)}
+									onClick={() => setSelection([network])}
+								>
+									<ListItemIcon>
+										<img
+											src={network.icon}
+											css={iconStyle}
+										/>
+									</ListItemIcon>
+									<ListItemText>{network.displayName}</ListItemText>
+									<Checkbox
+										css={checkboxStyle}
+										checked={value.includes(network)}
+										onChange={(ev, checked) => checked ? addSelection([network]) : removeSelection([network])}
+										onClick={(ev) => ev.stopPropagation()}
+										disableRipple
+									/>
+								</MenuItem>
+							))}
+						</>
+					);
+				})}
+			</Menu>
+		</>
 	);
 };
-
-export default NetworkSelect;
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 2ed0772f..80f089d8 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -5,7 +5,10 @@ import { Button, FormGroup, TextField } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import { css, Theme } from "@emotion/react";
 
-import NetworkSelect from "./NetworkSelect";
+import { Network } from "../model/network";
+import { getNetworks } from "../services/networksService";
+
+import { NetworkSelect } from "./NetworkSelect";
 
 const formGroupStyle = css`
 	flex-direction: row;
@@ -93,70 +96,61 @@ const buttonStyle = (theme: Theme) => css`
 `;
 
 export type SearchInputProps = FormHTMLAttributes<HTMLFormElement> & {
-	defaultNetwork?: string;
-	persistNetwork?: boolean;
-	onNetworkChange?: (network?: string) => void;
+	persist?: boolean;
 };
 
 function SearchInput(props: SearchInputProps) {
-	const { defaultNetwork, persistNetwork, onNetworkChange, ...restProps } = props;
-
-	console.log("default network", defaultNetwork);
+	const { persist, ...restProps } = props;
 
 	const [qs] = useSearchParams();
-	const query = qs.get("query");
-	console.log(qs, query);
 
-	const [network, setNetwork] = useState<string | undefined>(defaultNetwork);
-	const [search, setSearch] = useState<string>(query || "");
+	const [networks, setNetworks] = useState<Network[]>(getNetworks(qs.getAll("network") || []));
+	const [query, setQuery] = useState<string>(qs.get("query") || "");
 
 	const navigate = useNavigate();
 
-	const handleNetworkSelect = useCallback((network: string, isUserAction: boolean) => {
-		if (isUserAction && persistNetwork) {
-			console.log("store", network);
-			localStorage.setItem("network", network);
+	const storeNetworks = (networks: Network[]) => localStorage.setItem("networks", JSON.stringify(networks.map(it => it.name)));
+	const loadNetworks = () => getNetworks(JSON.parse(localStorage.getItem("networks") || "[]"));
+
+	const handleNetworkSelect = useCallback((networks: Network[], isUserAction: boolean) => {
+		if (isUserAction && persist) {
+			console.log("store", networks);
+			storeNetworks(networks);
 		}
 
-		setNetwork(network);
-	}, [persistNetwork]);
+		setNetworks(networks);
+	}, [persist]);
 
-	const handleSubmit = useCallback(
-		(e: any) => {
-			if (!network) {
-				return;
-			}
+	const handleSubmit = useCallback((ev: any) => {
+		ev.preventDefault();
 
-			e.preventDefault();
-			localStorage.setItem("network", network);
+		if (networks.length > 0) {
+			storeNetworks(networks);
+		}
 
-			let url = `/search?query=${search}`;
+		const searchParams = new URLSearchParams({
+			query: query
+		});
 
-			if (network !== "*") {
-				url = `${url}&network=${network}`;
-			}
+		for (const network of networks) {
+			searchParams.append("network", network.name);
+		}
 
-			console.log("SEARCH", url);
+		console.log("SEARCH", `/search?${searchParams.toString()}`);
 
-			navigate(url);
-		},
-		[navigate, network, search]
-	);
+		navigate(`/search?${searchParams.toString()}`);
+	}, [navigate, networks, query]);
 
 	useEffect(() => {
-		setSearch(query || "");
-	}, [query]);
+		setQuery(qs.get("query") || "");
+		setNetworks(getNetworks(qs.getAll("network") || []));
+	}, [qs]);
 
 	useEffect(() => {
-		if (persistNetwork) {
-			const network = localStorage.getItem("network");
-			network && setNetwork(network);
+		if (persist) {
+			setNetworks(loadNetworks());
 		}
-	}, [persistNetwork]);
-
-	useEffect(() => {
-		onNetworkChange?.(network);
-	}, [onNetworkChange, network]);
+	}, [persist]);
 
 	return (
 		<form {...restProps} onSubmit={handleSubmit}>
@@ -164,15 +158,15 @@ function SearchInput(props: SearchInputProps) {
 				<NetworkSelect
 					css={networkSelectStyle}
 					onChange={handleNetworkSelect}
-					value={network}
+					value={networks}
 				/>
 				<TextField
 					css={textFieldStyle}
 					fullWidth
 					id="search"
-					onChange={(e) => setSearch(e.target.value)}
+					onChange={(e) => setQuery(e.target.value)}
 					placeholder="Extrinsic hash / account address / block hash / block height / extrinsic name / event name"
-					value={search}
+					value={query}
 				/>
 				<Button
 					css={buttonStyle}
@@ -181,6 +175,7 @@ function SearchInput(props: SearchInputProps) {
 					type="submit"
 					variant="contained"
 					color="primary"
+					data-class="search-button"
 				>
 					<span className="text">Search</span>
 				</Button>
diff --git a/src/components/TabbedContent.tsx b/src/components/TabbedContent.tsx
index 2b114dfd..30ec6995 100644
--- a/src/components/TabbedContent.tsx
+++ b/src/components/TabbedContent.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { Children, cloneElement, PropsWithChildren, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { Children, cloneElement, HTMLAttributes, PropsWithChildren, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { CircularProgress, Tab, TabProps, Tabs } from "@mui/material";
 import ErrorIcon from "@mui/icons-material/Warning";
 import { Theme, css } from "@emotion/react";
@@ -65,14 +65,14 @@ export const TabPane = (props: TabPaneProps) => {
 	return <>{props.children}</>;
 };
 
-export type TabbedContentProps = {
+export interface TabbedContentProps extends HTMLAttributes<HTMLDivElement> {
 	children: ReactElement<TabPaneProps>|(ReactElement<TabPaneProps>|false)[];
 	currentTab?: string;
 	onTabChange: (tab: string) => void;
 }
 
 export const TabbedContent = (props: TabbedContentProps) => {
-	const { children, currentTab: tab, onTabChange } = props;
+	const { children, currentTab: tab, onTabChange, ...divProps } = props;
 
 	const tabHandles = useMemo(() => Children.map(children, (child) => {
 		if (!child) {
@@ -128,7 +128,7 @@ export const TabbedContent = (props: TabbedContentProps) => {
 	}, [currentTabPane, tabHandles, onTabChange]);
 
 	return (
-		<>
+		<div {...divProps}>
 			<div css={tabsWrapperStyle}>
 				<Tabs
 					css={tabsStyle}
@@ -142,6 +142,6 @@ export const TabbedContent = (props: TabbedContentProps) => {
 
 			</div>
 			{currentTabPane}
-		</>
+		</div>
 	);
 };
diff --git a/src/screens/home.tsx b/src/screens/home.tsx
index dfb89839..16f9b763 100644
--- a/src/screens/home.tsx
+++ b/src/screens/home.tsx
@@ -116,7 +116,7 @@ const searchInputStyle = (theme: Theme) => css`
 	}
 
 	${theme.breakpoints.up("md")} {
-		.MuiButton-root {
+		[data-class="search-button"] {
 			padding-left: 52px;
 			padding-right: 52px;
 		}
@@ -210,8 +210,7 @@ export const HomePage = () => {
 				<div css={searchBoxStyle}>
 					<SearchInput
 						css={searchInputStyle}
-						defaultNetwork={"polkadot"}
-						persistNetwork
+						persist
 					/>
 				</div>
 				<div css={networksStyle}>
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 417e2946..31049f15 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -36,7 +36,8 @@ const queryStyle = css`
 	}
 `;
 
-const xxStyle = css`
+const searchDetailsStyle = css`
+	margin-top: -16px;
 	line-height: 38px;
 `;
 
@@ -86,6 +87,10 @@ const loadingStyle = css`
 	word-break: break-all;
 `;
 
+const resultsStyle = css`
+	margin-top: 32px;
+`;
+
 export const SearchPage = () => {
 	const [qs] = useSearchParams();
 
@@ -153,17 +158,17 @@ export const SearchPage = () => {
 	if (!forceLoading && searchResult.totalCount === 1) {
 		const extrinsicItem = searchResult.extrinsics.data?.[0];
 		if (extrinsicItem?.data) {
-			return <Navigate to={`/${extrinsicItem.network}/extrinsic/${extrinsicItem.data.id}`} replace />;
+			return <Navigate to={`/${extrinsicItem.network.name}/extrinsic/${extrinsicItem.data.id}`} replace />;
 		}
 
 		const blockItem = searchResult.blocks.data?.[0];
 		if (blockItem?.data) {
-			return <Navigate to={`/${blockItem.network}/block/${blockItem.data.id}`} replace />;
+			return <Navigate to={`/${blockItem.network.name}/block/${blockItem.data.id}`} replace />;
 		}
 
 		const accountItem = searchResult.accounts.data?.[0];
 		if (accountItem?.data) {
-			return <Navigate to={`/${accountItem.network}/account/${accountItem.data.id}`} replace />;
+			return <Navigate to={`/${accountItem.network.name}/account/${accountItem.data.id}`} replace />;
 		}
 	}
 
@@ -204,7 +209,7 @@ export const SearchPage = () => {
 				<CardHeader>
 					Search results
 				</CardHeader>
-				<div css={xxStyle}>
+				<div css={searchDetailsStyle}>
 					For query <code css={queryStyle2}>{query}</code> in {" "}
 					{networkNames.length === 0 && <span>all networks.</span>}
 					{networkNames.length > 0 && (
@@ -229,10 +234,8 @@ export const SearchPage = () => {
 						report
 					/>
 				)}
-			</Card>
-			{searchResult.data &&
-				<Card>
-					<TabbedContent currentTab={tab} onTabChange={setTab}>
+				{searchResult.data &&
+					<TabbedContent css={resultsStyle} currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							value="accounts"
 							label="Accounts"
@@ -290,8 +293,8 @@ export const SearchPage = () => {
 							/>
 						</TabPane>
 					</TabbedContent>
-				</Card>
-			}
+				}
+			</Card>
 		</>
 	);
 };

From 94404af237608019ad43970555b01d5b6f31299e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Fri, 10 Nov 2023 12:53:32 +0100
Subject: [PATCH 14/21] search not found result & network select fix

---
 src/components/NetworkSelect.tsx | 78 ++++++++++++++++----------------
 src/screens/search.tsx           | 40 ++++++++--------
 2 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
index c0589f5e..b9636d97 100644
--- a/src/components/NetworkSelect.tsx
+++ b/src/components/NetworkSelect.tsx
@@ -208,47 +208,45 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 				{networkGroups.map((group, index) => {
 					const allSelected = group.networks.every(it => value.includes(it));
 
-					return (
-						<>
-							<Divider />
-							<ListSubheader css={headerStyle} key={index}>
-								<div>
-									{group.relayChainNetwork?.displayName || "Other"}{" "}
-									{group.relayChainNetwork && <><br /><span style={{fontSize: 12}}>and parachains</span></>}
-								</div>
-								<Link
-									onClick={() => allSelected
-										? removeSelection(group.networks)
-										: addSelection(group.networks)
-									}
-								>
-									{allSelected ? "deselect" : "select"} all
-								</Link>
-							</ListSubheader>
-							{group.networks.map((network) => (
-								<MenuItem
-									css={menuItemStyle}
-									selected={value.includes(network)}
-									onClick={() => setSelection([network])}
-								>
-									<ListItemIcon>
-										<img
-											src={network.icon}
-											css={iconStyle}
-										/>
-									</ListItemIcon>
-									<ListItemText>{network.displayName}</ListItemText>
-									<Checkbox
-										css={checkboxStyle}
-										checked={value.includes(network)}
-										onChange={(ev, checked) => checked ? addSelection([network]) : removeSelection([network])}
-										onClick={(ev) => ev.stopPropagation()}
-										disableRipple
+					return [
+						<Divider />,
+						<ListSubheader css={headerStyle} key={index}>
+							<div>
+								{group.relayChainNetwork?.displayName || "Other"}{" "}
+								{group.relayChainNetwork && <><br /><span style={{fontSize: 12}}>and parachains</span></>}
+							</div>
+							<Link
+								onClick={() => allSelected
+									? removeSelection(group.networks)
+									: addSelection(group.networks)
+								}
+							>
+								{allSelected ? "deselect" : "select"} all
+							</Link>
+						</ListSubheader>,
+						group.networks.map((network) => (
+							<MenuItem
+								css={menuItemStyle}
+								selected={value.includes(network)}
+								onClick={() => setSelection([network])}
+							>
+								<ListItemIcon>
+									<img
+										src={network.icon}
+										css={iconStyle}
 									/>
-								</MenuItem>
-							))}
-						</>
-					);
+								</ListItemIcon>
+								<ListItemText>{network.displayName}</ListItemText>
+								<Checkbox
+									css={checkboxStyle}
+									checked={value.includes(network)}
+									onChange={(ev, checked) => checked ? addSelection([network]) : removeSelection([network])}
+									onClick={(ev) => ev.stopPropagation()}
+									disableRipple
+								/>
+							</MenuItem>
+						))
+					];
 				})}
 			</Menu>
 		</>
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 31049f15..638edf21 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -82,6 +82,10 @@ const errorStyle = css`
 	margin-top: 32px;
 `;
 
+const notFoundStyle = css`
+	margin-top: 48px;
+`;
+
 const loadingStyle = css`
 	text-align: center;
 	word-break: break-all;
@@ -183,26 +187,6 @@ export const SearchPage = () => {
 		);
 	}
 
-	if (searchResult.notFound) {
-		return (
-			<Card>
-				<NotFound>Nothing was found for query <span css={queryStyle}>{query}</span></NotFound>
-			</Card>
-		);
-	}
-
-	if (searchResult.error) {
-		return (
-			<Card>
-				<ErrorMessage
-					message={<>Unexpected error occured while searching for <span css={queryStyle}>{query}</span></>}
-					details={searchResult.error}
-					report
-				/>
-			</Card>
-		);
-	}
-
 	return (
 		<>
 			<Card>
@@ -226,6 +210,15 @@ export const SearchPage = () => {
 						</>
 					)}
 				</div>
+				{searchResult.error && (
+					<Card>
+						<ErrorMessage
+							message={<>Unexpected error occured</>}
+							details={searchResult.error}
+							report
+						/>
+					</Card>
+				)}
 				{searchResult.data?.errors && searchResult.data?.errors.length > 0 && (
 					<ErrorMessage
 						css={errorStyle}
@@ -234,7 +227,10 @@ export const SearchPage = () => {
 						report
 					/>
 				)}
-				{searchResult.data &&
+				{searchResult.data && searchResult.data.totalCount === 0 && (
+					<NotFound css={notFoundStyle}>Nothing was found</NotFound>
+				)}
+				{searchResult.data && searchResult.data.totalCount > 0 && (
 					<TabbedContent css={resultsStyle} currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							value="accounts"
@@ -293,7 +289,7 @@ export const SearchPage = () => {
 							/>
 						</TabPane>
 					</TabbedContent>
-				}
+				)}
 			</Card>
 		</>
 	);

From 88b70f592d9c4165edacf7f97f0bf1fa77b7ba36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 13 Nov 2023 09:48:38 +0100
Subject: [PATCH 15/21] improve network select keyboard controls

---
 src/components/NetworkSelect.tsx | 34 ++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
index b9636d97..4e07dcbe 100644
--- a/src/components/NetworkSelect.tsx
+++ b/src/components/NetworkSelect.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { useCallback, useState } from "react";
-import { Button, ButtonProps, Checkbox, Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material";
+import { Button, ButtonProps, Checkbox, Divider, ListItem, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import { BlurOn as AllIcon, ArrowDropDown } from "@mui/icons-material";
 import { Theme, css } from "@emotion/react";
@@ -81,10 +81,10 @@ const checkboxStyle = css`
 		left: 0;
 		height: 65%;
 		width: 1px;
-		background-color: ${grey[400]};
+		background-color: rgba(0, 0, 0, .2);
 	}
 
-	.MuiMenuItem-root:not(:hover) &::before {
+	.MuiMenuItem-root:not(:hover):not(:focus) &::before {
 		display: none;
 	}
 `;
@@ -103,12 +103,6 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 
 	const open = !!anchorEl;
 
-	const handleClose = useCallback(() => setAnchorEl(undefined), []);
-
-	const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl(event.currentTarget);
-	}, []);
-
 	const setSelection = useCallback((networks: Network[]) => {
 		const newValue = [];
 
@@ -152,6 +146,26 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 		onChange?.(newValue, true);
 	}, [value, networkGroups, onChange]);
 
+	const handleClose = useCallback(() => setAnchorEl(undefined), []);
+
+	const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+
+	const handleItemClick = useCallback((network: Network, event: React.MouseEvent) => {
+		if ("key" in event && event.key === " ") {
+			if (value.includes(network)) {
+				removeSelection([network]);
+			} else {
+				addSelection([network]);
+			}
+
+			return;
+		}
+
+		setSelection([network]);
+	}, [value, addSelection, setSelection]);
+
 	console.log("value", value);
 
 
@@ -228,7 +242,7 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 							<MenuItem
 								css={menuItemStyle}
 								selected={value.includes(network)}
-								onClick={() => setSelection([network])}
+								onClick={(ev) => handleItemClick(network, ev)}
 							>
 								<ListItemIcon>
 									<img

From 2a31cee627e2b3107a84a6d44de33c3a4f2afdcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 13 Nov 2023 11:16:49 +0100
Subject: [PATCH 16/21] add network info to items

---
 src/components/NetworkBadge.tsx               | 35 +++++++++++++++++++
 src/components/ResultLayout.tsx               | 16 +++++----
 src/components/SearchInput.tsx                |  9 ++---
 src/components/account/AccountInfoTable.tsx   |  7 ++++
 src/components/blocks/BlockInfoTable.tsx      |  7 ++++
 src/components/calls/CallInfoTable.tsx        |  7 ++++
 src/components/events/EventInfoTable.tsx      |  7 ++++
 .../extrinsics/ExtrinsicInfoTable.tsx         |  8 +++++
 src/components/search/SearchResultsTable.tsx  | 21 ++---------
 src/hooks/useNetworkLoaderData.ts             |  7 ++++
 src/hooks/useRootLoaderData.ts                |  7 ----
 src/screens/account.tsx                       |  2 +-
 src/screens/block.tsx                         |  2 +-
 src/screens/call.tsx                          |  2 +-
 src/screens/event.tsx                         |  2 +-
 src/screens/extrinsic.tsx                     |  2 +-
 src/screens/network.tsx                       |  2 +-
 src/screens/runtime.tsx                       |  2 +-
 18 files changed, 102 insertions(+), 43 deletions(-)
 create mode 100644 src/components/NetworkBadge.tsx
 create mode 100644 src/hooks/useNetworkLoaderData.ts
 delete mode 100644 src/hooks/useRootLoaderData.ts

diff --git a/src/components/NetworkBadge.tsx b/src/components/NetworkBadge.tsx
new file mode 100644
index 00000000..340c813d
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/ResultLayout.tsx b/src/components/ResultLayout.tsx
index 664312de..840d79d9 100644
--- a/src/components/ResultLayout.tsx
+++ b/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>
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 80f089d8..a75eefb5 100644
--- a/src/components/SearchInput.tsx
+++ b/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) {
diff --git a/src/components/account/AccountInfoTable.tsx b/src/components/account/AccountInfoTable.tsx
index 84aad101..fe0c41a7 100644
--- a/src/components/account/AccountInfoTable.tsx
+++ b/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)}
diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
index 8818cf78..84f5f4e3 100644
--- a/src/components/blocks/BlockInfoTable.tsx
+++ b/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) =>
diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
index 03b3b3d7..2465b47c 100644
--- a/src/components/calls/CallInfoTable.tsx
+++ b/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) =>
diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx
index 388f71c1..be765676 100644
--- a/src/components/events/EventInfoTable.tsx
+++ b/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) =>
diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx
index 95afd436..421f99e0 100644
--- a/src/components/extrinsics/ExtrinsicInfoTable.tsx
+++ b/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) =>
diff --git a/src/components/search/SearchResultsTable.tsx b/src/components/search/SearchResultsTable.tsx
index c9abfa3f..c43aeb50 100644
--- a/src/components/search/SearchResultsTable.tsx
+++ b/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}
diff --git a/src/hooks/useNetworkLoaderData.ts b/src/hooks/useNetworkLoaderData.ts
new file mode 100644
index 00000000..059ca7ef
--- /dev/null
+++ b/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;
+}
diff --git a/src/hooks/useRootLoaderData.ts b/src/hooks/useRootLoaderData.ts
deleted file mode 100644
index 40f0ddfe..00000000
--- a/src/hooks/useRootLoaderData.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useRouteLoaderData } from "react-router";
-
-import { NetworkLoaderData } from "../model/rootLoaderData";
-
-export function useNetworkLoaderData() {
-	return useRouteLoaderData("network") as NetworkLoaderData;
-}
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index 2d2b983f..79fe8fb0 100644
--- a/src/screens/account.tsx
+++ b/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";
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 0dc75b23..3d657d2a 100644
--- a/src/screens/block.tsx
+++ b/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";
 
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index 2bc30f6f..106484e4 100644
--- a/src/screens/call.tsx
+++ b/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 = {
diff --git a/src/screens/event.tsx b/src/screens/event.tsx
index 4191090e..3b555861 100644
--- a/src/screens/event.tsx
+++ b/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;
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index ccc303dd..5a22df5e 100644
--- a/src/screens/extrinsic.tsx
+++ b/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 = {
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index 08987992..e214d7a3 100644
--- a/src/screens/network.tsx
+++ b/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";
diff --git a/src/screens/runtime.tsx b/src/screens/runtime.tsx
index 74885e13..d08050ba 100644
--- a/src/screens/runtime.tsx
+++ b/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";
 

From 083bb06cb805c6715048107c2386feefc4447688 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 14 Nov 2023 12:23:00 +0100
Subject: [PATCH 17/21] use simplified item IDs

---
 src/components/DataViewerValueParsed.tsx      |   2 +-
 .../{ => account}/AccountAddress.tsx          |  11 +-
 .../{ => account}/AccountAvatar.tsx           |   0
 .../account/AccountBalancesTable.tsx          |   3 +-
 src/components/balances/BalancesTable.tsx     |   3 +-
 src/components/blocks/BlockInfoTable.tsx      |   3 +-
 src/components/blocks/BlockLink.tsx           |  21 ++++
 src/components/blocks/BlocksTable.tsx         |  15 +--
 src/components/calls/CallInfoTable.tsx        |  20 ++--
 src/components/calls/CallLink.tsx             |  21 ++++
 src/components/calls/CallsTable.tsx           |  15 ++-
 src/components/events/EventInfoTable.tsx      |  23 ++--
 src/components/events/EventLink.tsx           |  21 ++++
 src/components/events/EventsTable.tsx         |  13 +--
 .../extrinsics/ExtrinsicInfoTable.tsx         |   9 +-
 src/components/extrinsics/ExtrinsicLink.tsx   |  21 ++++
 src/components/extrinsics/ExtrinsicsTable.tsx |   9 +-
 .../search/AccountSearchResultsTable.tsx      |   2 +-
 .../search/BlockSearchResultsTable.tsx        |   9 +-
 .../search/EventSearchResultsTable.tsx        |  17 ++-
 .../search/ExtrinsicSearchResultsTable.tsx    |   9 +-
 src/components/transfers/TransfersTable.tsx   |  13 +--
 src/hooks/usePaginatedResource.ts             |   1 +
 src/model/archive/archiveCall.ts              |   1 +
 src/model/archive/archiveEvent.ts             |   1 +
 src/model/explorer-squid/explorerSquidCall.ts |   1 +
 src/model/transfer.ts                         |   4 +-
 src/router.tsx                                | 109 +++++++++++++-----
 src/screens/account.tsx                       |   8 +-
 src/screens/block.tsx                         |  20 ++--
 src/screens/call.tsx                          |  11 +-
 src/screens/event.tsx                         |   6 +-
 src/screens/extrinsic.tsx                     |  12 +-
 src/services/balancesService.ts               |   2 +-
 src/services/blocksService.ts                 |  34 +++++-
 src/services/callsService.ts                  | 106 ++++++++++++++---
 src/services/eventsService.ts                 |  98 ++++++++++++----
 src/services/extrinsicsService.ts             |  92 +++++++++++----
 src/services/searchService.ts                 |  18 +--
 src/services/transfersService.ts              |  28 +----
 src/utils/id.ts                               |  11 ++
 41 files changed, 573 insertions(+), 250 deletions(-)
 rename src/components/{ => account}/AccountAddress.tsx (88%)
 rename src/components/{ => account}/AccountAvatar.tsx (100%)
 create mode 100644 src/components/blocks/BlockLink.tsx
 create mode 100644 src/components/calls/CallLink.tsx
 create mode 100644 src/components/events/EventLink.tsx
 create mode 100644 src/components/extrinsics/ExtrinsicLink.tsx
 create mode 100644 src/utils/id.ts

diff --git a/src/components/DataViewerValueParsed.tsx b/src/components/DataViewerValueParsed.tsx
index d9d04433..fa04943f 100644
--- a/src/components/DataViewerValueParsed.tsx
+++ b/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
diff --git a/src/components/AccountAddress.tsx b/src/components/account/AccountAddress.tsx
similarity index 88%
rename from src/components/AccountAddress.tsx
rename to src/components/account/AccountAddress.tsx
index 620f1991..75da6f3d 100644
--- a/src/components/AccountAddress.tsx
+++ b/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;
diff --git a/src/components/AccountAvatar.tsx b/src/components/account/AccountAvatar.tsx
similarity index 100%
rename from src/components/AccountAvatar.tsx
rename to src/components/account/AccountAvatar.tsx
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index 0b38b2ab..20e95f74 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/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;
diff --git a/src/components/balances/BalancesTable.tsx b/src/components/balances/BalancesTable.tsx
index c4ecd7ac..dd0f09ae 100644
--- a/src/components/balances/BalancesTable.tsx
+++ b/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";
diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
index 84f5f4e3..7c49640f 100644
--- a/src/components/blocks/BlockInfoTable.tsx
+++ b/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";
diff --git a/src/components/blocks/BlockLink.tsx b/src/components/blocks/BlockLink.tsx
new file mode 100644
index 00000000..d7374511
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
index dbc00d9a..82a88521 100644
--- a/src/components/blocks/BlocksTable.tsx
+++ b/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
diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
index 2465b47c..3e4b2ddb 100644
--- a/src/components/calls/CallInfoTable.tsx
+++ b/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}
diff --git a/src/components/calls/CallLink.tsx b/src/components/calls/CallLink.tsx
new file mode 100644
index 00000000..4f90b9c3
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
index ced6a7fd..57891299 100644
--- a/src/components/calls/CallsTable.tsx
+++ b/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>
diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx
index be765676..d927660b 100644
--- a/src/components/events/EventInfoTable.tsx
+++ b/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}
 			/>
diff --git a/src/components/events/EventLink.tsx b/src/components/events/EventLink.tsx
new file mode 100644
index 00000000..d720fc32
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
index 66d3b2e1..752d8870 100644
--- a/src/components/events/EventsTable.tsx
+++ b/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} />
 					)}
 				/>
 			)}
diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx
index 421f99e0..a60a95e2 100644
--- a/src/components/extrinsics/ExtrinsicInfoTable.tsx
+++ b/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()}
 			/>
diff --git a/src/components/extrinsics/ExtrinsicLink.tsx b/src/components/extrinsics/ExtrinsicLink.tsx
new file mode 100644
index 00000000..0b70337f
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/extrinsics/ExtrinsicsTable.tsx b/src/components/extrinsics/ExtrinsicsTable.tsx
index b3703bdc..488c8675 100644
--- a/src/components/extrinsics/ExtrinsicsTable.tsx
+++ b/src/components/extrinsics/ExtrinsicsTable.tsx
@@ -2,12 +2,13 @@ import { Extrinsic } from "../../model/extrinsic";
 import { Network } from "../../model/network";
 import { PaginatedResource } from "../../model/paginatedResource";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
 import { ButtonLink } from "../ButtonLink";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
-import { Link } from "../Link";
 import { Time } from "../Time";
 
+import { ExtrinsicLink } from "./ExtrinsicLink";
+
 export type ExtrinsicsTableProps = {
 	network: Network;
 	extrinsics: PaginatedResource<Extrinsic>,
@@ -41,9 +42,7 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 			<ExtrinsicsTableAttribute
 				label="ID"
 				render={(extrinsic) =>
-					<Link to={`/${network.name}/extrinsic/${extrinsic.id}`}>
-						{extrinsic.id}
-					</Link>
+					<ExtrinsicLink network={network} id={extrinsic.id} />
 				}
 			/>
 			<ExtrinsicsTableAttribute
diff --git a/src/components/search/AccountSearchResultsTable.tsx b/src/components/search/AccountSearchResultsTable.tsx
index 2215232a..ec1f03a8 100644
--- a/src/components/search/AccountSearchResultsTable.tsx
+++ b/src/components/search/AccountSearchResultsTable.tsx
@@ -4,7 +4,7 @@ import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 import { encodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
 
 import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
 
diff --git a/src/components/search/BlockSearchResultsTable.tsx b/src/components/search/BlockSearchResultsTable.tsx
index 7cfe57fd..2939551c 100644
--- a/src/components/search/BlockSearchResultsTable.tsx
+++ b/src/components/search/BlockSearchResultsTable.tsx
@@ -2,8 +2,9 @@ import { Block } from "../../model/block";
 import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 
-import { AccountAddress } from "../AccountAddress";
-import { Link } from "../Link";
+import { AccountAddress } from "../account/AccountAddress";
+import { BlockLink } from "../blocks/BlockLink";
+
 import { Time } from "../Time";
 
 import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
@@ -29,9 +30,7 @@ export const BlockSearchResultsTable = (props: BlockSearchResultsTable) => {
 			<SearchResultsTableItemAttribute<Block>
 				label="Block (Height)"
 				render={(block) =>
-					<Link to={`/${block.network.name}/block/${block.id}`}>
-						{block.height}
-					</Link>
+					<BlockLink network={block.network} id={block.id} />
 				}
 			/>
 			<SearchResultsTableItemAttribute<Block>
diff --git a/src/components/search/EventSearchResultsTable.tsx b/src/components/search/EventSearchResultsTable.tsx
index 17a3338b..fc41ebcd 100644
--- a/src/components/search/EventSearchResultsTable.tsx
+++ b/src/components/search/EventSearchResultsTable.tsx
@@ -1,15 +1,16 @@
 import { css } from "@emotion/react";
 
 import { Event } from "../../model/event";
-import { ItemsResponse } from "../../model/itemsResponse";
 import { SearchResultItem } from "../../model/searchResultItem";
+import { PaginatedResource } from "../../model/paginatedResource";
+
+import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
+import { EventLink } from "../events/EventLink";
 
 import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
-import { Link } from "../Link";
 
 import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
-import { PaginatedResource } from "../../model/paginatedResource";
 
 const eventArgsColCss = css`
 	width: 35%;
@@ -36,9 +37,7 @@ export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
 			<SearchResultsTableItemAttribute<Event>
 				label="Event (ID)"
 				render={(event) => (
-					<Link to={`/${event.network.name}/event/${event.id}`}>
-						{event.id}
-					</Link>
+					<EventLink network={event.network} id={event.id} />
 				)}
 			/>
 			<SearchResultsTableItemAttribute<Event>
@@ -55,10 +54,8 @@ export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
 			/>
 			<SearchResultsTableItemAttribute<Event>
 				label="Extrinsic"
-				render={(event) => (
-					<Link to={`/${event.network.name}/extrinsic/${event.extrinsicId}`}>
-						{event.extrinsicId}
-					</Link>
+				render={(event) => event.extrinsicId && (
+					<ExtrinsicLink network={event.network} id={event.extrinsicId} />
 				)}
 			/>
 			<SearchResultsTableItemAttribute<Event>
diff --git a/src/components/search/ExtrinsicSearchResultsTable.tsx b/src/components/search/ExtrinsicSearchResultsTable.tsx
index 2ded2567..742eaeed 100644
--- a/src/components/search/ExtrinsicSearchResultsTable.tsx
+++ b/src/components/search/ExtrinsicSearchResultsTable.tsx
@@ -1,10 +1,11 @@
 import { Extrinsic } from "../../model/extrinsic";
-import { ItemsResponse } from "../../model/itemsResponse";
 import { PaginatedResource } from "../../model/paginatedResource";
 import { SearchResultItem } from "../../model/searchResultItem";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+
 import { ButtonLink } from "../ButtonLink";
+import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 import { Link } from "../Link";
 import { Time } from "../Time";
 
@@ -31,9 +32,7 @@ export const ExtrinsicSearchResultsTable = (props: ExtrinsicSearchResultsTable)
 			<SearchResultsTableItemAttribute<Extrinsic>
 				label="Extrinsic (ID)"
 				render={(extrinsic) => (
-					<Link to={`/${extrinsic.network.name}/extrinsic/${extrinsic.id}`}>
-						{extrinsic.id}
-					</Link>
+					<ExtrinsicLink network={extrinsic.network} id={extrinsic.id} />
 				)}
 			/>
 			<SearchResultsTableItemAttribute<Extrinsic>
diff --git a/src/components/transfers/TransfersTable.tsx b/src/components/transfers/TransfersTable.tsx
index b85dc016..7d3d717a 100644
--- a/src/components/transfers/TransfersTable.tsx
+++ b/src/components/transfers/TransfersTable.tsx
@@ -7,10 +7,11 @@ import { PaginatedResource } from "../../model/paginatedResource";
 import { Transfer } from "../../model/transfer";
 import { Network } from "../../model/network";
 
-import { AccountAddress } from "../AccountAddress";
+import { AccountAddress } from "../account/AccountAddress";
+import { EventLink } from "../events/EventLink";
+
 import { Currency } from "../Currency";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
-import { Link } from "../Link";
 import { Time } from "../Time";
 
 export type TransfersTableProps = {
@@ -44,11 +45,9 @@ function TransfersTable(props: TransfersTableProps) {
 			data-test="transfers-table"
 		>
 			<TransfersTableAttribute
-				label="Extrinsic"
-				render={(transfer) => transfer.extrinsic &&
-					<Link to={`/${network.name}/extrinsic/${transfer.extrinsic.id}`}>
-						{transfer.extrinsic.id}
-					</Link>
+				label="Event"
+				render={(transfer) =>
+					<EventLink network={network} id={transfer.eventId} />
 				}
 			/>
 			<TransfersTableAttribute
diff --git a/src/hooks/usePaginatedResource.ts b/src/hooks/usePaginatedResource.ts
index 38f55c74..d5a57212 100644
--- a/src/hooks/usePaginatedResource.ts
+++ b/src/hooks/usePaginatedResource.ts
@@ -21,6 +21,7 @@ export function usePaginatedResource<T = any, F extends any[] = any[]>(
 
 	const resource = useResource(fetchItems, [...args, { page, pageSize: 10 /* TODO constant */ }], {
 		...restOptions,
+		revalidateOnFocus: false,
 		refresh: refresh || (refreshFirstPage && page === 1)
 	});
 
diff --git a/src/model/archive/archiveCall.ts b/src/model/archive/archiveCall.ts
index 778f0118..cf21965d 100644
--- a/src/model/archive/archiveCall.ts
+++ b/src/model/archive/archiveCall.ts
@@ -17,5 +17,6 @@ export type ArchiveCall = {
 	}|null;
 	extrinsic: {
 		id: string;
+		indexInBlock: number;
 	}
 }
diff --git a/src/model/archive/archiveEvent.ts b/src/model/archive/archiveEvent.ts
index 5e1d6e39..3716a8e0 100644
--- a/src/model/archive/archiveEvent.ts
+++ b/src/model/archive/archiveEvent.ts
@@ -1,6 +1,7 @@
 export type ArchiveEvent = {
 	id: string;
 	name: string;
+	indexInBlock: number;
 	block: {
 		id: string;
 		height: number;
diff --git a/src/model/explorer-squid/explorerSquidCall.ts b/src/model/explorer-squid/explorerSquidCall.ts
index 36243ac1..78897060 100644
--- a/src/model/explorer-squid/explorerSquidCall.ts
+++ b/src/model/explorer-squid/explorerSquidCall.ts
@@ -13,5 +13,6 @@ export type ExplorerSquidCall = {
 	};
 	extrinsic: {
 		id: string;
+		indexInBlock: number;
 	}
 }
diff --git a/src/model/transfer.ts b/src/model/transfer.ts
index 919ed6c8..22fda91d 100644
--- a/src/model/transfer.ts
+++ b/src/model/transfer.ts
@@ -2,6 +2,7 @@ import Decimal from "decimal.js";
 
 export type Transfer = {
 	id: string;
+	eventId: string;
 	direction: string;
 	accountPublicKey: string;
 	blockNumber: number;
@@ -11,7 +12,4 @@ export type Transfer = {
 	toPublicKey: string;
 	amount: Decimal;
 	success: boolean;
-	extrinsic: {
-		id: string;
-	} | null;
 }
diff --git a/src/router.tsx b/src/router.tsx
index d758e13f..0065f614 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,4 +1,4 @@
-import { Navigate, RouteObject, createBrowserRouter, redirect } from "react-router-dom";
+import { LoaderFunctionArgs, Navigate, RouteObject, createBrowserRouter, redirect } from "react-router-dom";
 
 import { ResultLayout } from "./components/ResultLayout";
 import { getNetwork } from "./services/networksService";
@@ -16,8 +16,24 @@ import { NotFoundPage } from "./screens/notFound";
 import { SearchPage } from "./screens/search";
 import { RuntimePage } from "./screens/runtime";
 
+import { simplifyCallId } from "./services/callsService";
+import { simplifyBlockId } from "./services/blocksService";
+import { simplifyExtrinsicId } from "./services/extrinsicsService";
+import { simplifyEventId } from "./services/eventsService";
+
 import { config } from "./config";
 
+const networkLoader = ({ params }: LoaderFunctionArgs) => {
+	const { network: networkName } = params as { network: string };
+
+	try {
+		const network = getNetwork(networkName);
+		return { network };
+	} catch (e) {
+		throw new Response("Network not found", {status: 404});
+	}
+};
+
 export const routes: RouteObject[] = [
 	{
 		path: "/",
@@ -34,44 +50,89 @@ export const routes: RouteObject[] = [
 			{
 				id: "network",
 				path: ":network",
-				loader: ({ params }) => {
-					const { network: networkName } = params;
-
-					try {
-						const network = getNetwork(networkName as string);
-						return { network };
-					} catch (e) {
-						throw new Response("Network not found", {status: 404});
-					}
-				},
+				loader: networkLoader,
 				errorElement: <ErrorPage />,
 				children: [
 					{
 						path: ":tab?",
 						element: <NetworkPage />,
 					},
-					{
-						path: "extrinsic/:id/:tab?",
-						element: <ExtrinsicPage />,
-					},
 					{
 						path: "block/:id/:tab?",
 						element: <BlockPage />,
+						loader: (args) => {
+							const { params } = args;
+							const { id } = params as { id: string };
+
+							const simplifiedId = simplifyBlockId(id);
+
+							if (id !== simplifiedId) {
+								const { network } = networkLoader(args);
+								return redirect(`/${network.name}/block/${simplifiedId}`);
+							}
+
+							return null;
+						}
+					},
+					{
+						path: "extrinsic/:id/:tab?",
+						element: <ExtrinsicPage />,
+						loader: (args) => {
+							const { params } = args;
+							const { id } = params as { id: string };
+
+							const simplifiedId = simplifyExtrinsicId(id);
+
+							if (id !== simplifiedId) {
+								const { network } = networkLoader(args);
+								return redirect(`/${network.name}/extrinsic/${simplifiedId}`);
+							}
+
+							return null;
+						}
 					},
 					{
 						path: "call/:id/:tab?",
 						element: <CallPage />,
+						loader: (args) => {
+							const { params } = args;
+							const { id } = params as { id: string };
+
+							const simplifiedId = simplifyCallId(id);
+
+							if (id !== simplifiedId) {
+								const { network } = networkLoader(args);
+								return redirect(`/${network.name}/call/${simplifiedId}`);
+							}
+
+							return null;
+						}
+					},
+					{
+						path: "event/:id",
+						element: <EventPage />,
+						loader: (args) => {
+							const { params } = args;
+							const { id } = params as { id: string };
+
+							const simplifiedId = simplifyEventId(id);
+
+							if (id !== simplifiedId) {
+								const { network } = networkLoader(args);
+								return redirect(`/${network.name}/event/${simplifiedId}`);
+							}
+
+							return null;
+						}
 					},
 					{
 						path: "account/:address/:tab?",
 						element: <AccountPage />,
-						loader: ({ params }) => {
-							const { network: networkName, address } = params;
-							const network = networkName ? getNetwork(networkName, false) : undefined;
+						loader: (args) => {
+							const { params } = args;
+							const { address } = params as { address: string };
 
-							if (!network || !address) {
-								return null;
-							}
+							const { network } = networkLoader(args);
 
 							const encodedAddress = encodeAddress(address, network.prefix);
 							if (address !== encodedAddress) {
@@ -81,13 +142,9 @@ export const routes: RouteObject[] = [
 							return null;
 						}
 					},
-					{
-						path: "event/:id",
-						element: <EventPage />,
-					},
 					{
 						path: "latest-extrinsics",
-						element: <Navigate to=".." replace />,
+						element: <Navigate to="../extrinsics" replace />,
 					},
 					{
 						path: "runtime",
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index 79fe8fb0..042b9f61 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from "@mui/material";
 import { InfoOutlined } from "@mui/icons-material";
 import { css, Theme } from "@emotion/react";
 
-import { AccountAvatar } from "../components/AccountAvatar";
+import { AccountAvatar } from "../components/account/AccountAvatar";
 import { AccountBalancesTable } from "../components/account/AccountBalancesTable";
 import { AccountIdentityInfo } from "../components/account/AccountIdentityInfo";
 import { AccountInfoTable } from "../components/account/AccountInfoTable";
@@ -92,17 +92,17 @@ export const AccountPage = () => {
 
 	const balances = useAccountBalances(address, { refresh: true });
 
-	const extrinsics = useExtrinsics(network.name, { signerAddress_eq: address }, {
+	const extrinsics = useExtrinsics(network.name, { signerAddress: address }, {
 		page: tab === "extrinsics" ? page : 1,
 		refreshFirstPage: true
 	});
 
-	const calls = useCalls(network.name, { callerAddress_eq: address }, {
+	const calls = useCalls(network.name, { callerAddress: address }, {
 		page: tab === "calls" ? page : 1,
 		refreshFirstPage: true
 	});
 
-	const transfers = useTransfers(network.name, { accountAddress_eq: address }, {
+	const transfers = useTransfers(network.name, { accountAddress: address }, {
 		page: tab === "transfers" ? page : 1,
 		refreshFirstPage: true
 	});
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 3d657d2a..4ea22a54 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -29,21 +29,27 @@ export const BlockPage = () => {
 	const [tab, setTab] = useTab();
 	const [page, setPage] = usePage();
 
-	const block = useBlock(network.name, { id_eq: id });
+	const block = useBlock(network.name, { simplifiedId: id });
 
-	const extrinsics = useExtrinsics(network.name, { blockId_eq: id }, {
+	const extrinsics = useExtrinsics(network.name, block.data && { blockId: block.data.id }, {
+		order: "id_ASC",
 		page: tab === "extrinsics" ? page : 1,
-		refreshFirstPage: true
+		refreshFirstPage: true,
+		skip: !block.data
 	});
 
-	const events = useEvents(network.name, { blockId_eq: id }, {
+	const events = useEvents(network.name, block.data && { blockId: block.data.id }, {
+		order: "id_ASC",
 		page: tab === "events" ? page : 1,
-		refreshFirstPage: true
+		refreshFirstPage: true,
+		skip: !block.data
 	});
 
-	const calls = useCalls(network.name, { blockId_eq: id }, {
+	const calls = useCalls(network.name, block.data && { blockId: block.data.id }, {
+		order: "id_ASC",
 		page: tab === "calls" ? page : 1,
-		refreshFirstPage: true
+		refreshFirstPage: true,
+		skip: !block.data
 	});
 
 	useDOMEventTrigger("data-loaded", !block.loading && !extrinsics.loading && !events.loading && !calls.loading);
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index 106484e4..4f9e4327 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { Navigate, useLoaderData, useParams } from "react-router-dom";
 
 import { Card, CardHeader } from "../components/Card";
 import { CallInfoTable } from "../components/calls/CallInfoTable";
@@ -14,7 +14,9 @@ import { useNetworkLoaderData } from "../hooks/useNetworkLoaderData";
 import { useTab } from "../hooks/useTab";
 
 export type CallPageParams = {
+	network: string;
 	id: string;
+	tab?: string;
 };
 
 export const CallPage = () => {
@@ -24,11 +26,12 @@ export const CallPage = () => {
 	const [tab, setTab] = useTab();
 	const [page, setPage] = usePage();
 
-	const call = useCall(network.name, { id_eq: id });
+	const call = useCall(network.name, { simplifiedId: id });
 
-	const events = useEvents(network.name, { callId_eq: id }, {
+	const events = useEvents(network.name, call.data && { callId: call.data.id }, {
 		order: "id_ASC",
-		page: tab === "events" ? page : 1
+		page: tab === "events" ? page : 1,
+		skip: !call.data
 	});
 
 	useDOMEventTrigger("data-loaded", !call.loading && !events.loading);
diff --git a/src/screens/event.tsx b/src/screens/event.tsx
index 3b555861..0295c916 100644
--- a/src/screens/event.tsx
+++ b/src/screens/event.tsx
@@ -15,11 +15,11 @@ export const EventPage = () => {
 	const { network } = useNetworkLoaderData();
 	const { id } = useParams() as EventPageParams;
 
-	const event = useEvent(network.name, { id_eq: id });
+	const event = useEvent(network.name, { simplifiedId: id });
 
 	useDOMEventTrigger("data-loaded", !event.loading);
 
-	return (<>
+	return (
 		<Card>
 			<CardHeader>
 				Event #{id}
@@ -27,5 +27,5 @@ export const EventPage = () => {
 			</CardHeader>
 			<EventInfoTable network={network} event={event} />
 		</Card>
-	</>);
+	);
 };
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index 5a22df5e..3c1aceaa 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -27,16 +27,18 @@ export const ExtrinsicPage = () => {
 	const [tab, setTab] = useTab();
 	const [page, setPage] = usePage();
 
-	const extrinsic = useExtrinsic(network.name, { id_eq: id });
+	const extrinsic = useExtrinsic(network.name, { simplifiedId: id });
 
-	const events = useEvents(network.name, { extrinsicId_eq: id }, {
+	const events = useEvents(network.name, extrinsic.data && { extrinsicId: extrinsic.data.id }, {
 		order: "id_ASC",
-		page: tab === "events" ? page : 1
+		page: tab === "events" ? page : 1,
+		skip: !extrinsic.data
 	});
 
-	const calls = useCalls(network.name, { extrinsicId_eq: id }, {
+	const calls = useCalls(network.name, extrinsic.data && { extrinsicId: extrinsic.data.id }, {
 		order: "id_ASC",
-		page: tab === "calls" ? page : 1
+		page: tab === "calls" ? page : 1,
+		skip: !extrinsic.data
 	});
 
 	useDOMEventTrigger("data-loaded", !extrinsic.loading && !events.loading && !calls.loading);
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index cd43ccf1..ea774a73 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -15,7 +15,7 @@ import { fetchStatsSquid } from "./fetchService";
 import { getNetwork, getNetworks, hasSupport } from "./networksService";
 
 export type BalancesFilter =
-	{ id_eq: string; }
+	{ id: string; }
 
 export type BalancesOrder = string | string[];
 
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index 9a126685..7f2fc5fa 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -3,6 +3,7 @@ import { Block } from "../model/block";
 import { ExplorerSquidBlock } from "../model/explorer-squid/explorerSquidBlock";
 import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
+import { simplifyId } from "../utils/id";
 
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
@@ -10,9 +11,11 @@ import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 
 export type BlocksFilter =
-	{ id_eq: string; }
-	| { hash_eq: string; }
-	| { height_eq: number; };
+	undefined
+	| { id: string; }
+	| { simplifiedId: string; }
+	| { hash: string; }
+	| { height: number; };
 
 export type BlocksOrder = string | string[];
 
@@ -181,6 +184,19 @@ async function getExplorerSquidBlocks(
 	return blocks;
 }
 
+/**
+ * Get simplified version of block ID
+ * which will be displayed to the user.
+ *
+ * It doesn't include block hash and parts have no leading zeros.
+ *
+ * examples:
+ * - 0020537612-5800a -> 20537612
+ */
+export function simplifyBlockId(id: string) {
+	return simplifyId(id, /\d{10}-[^-]{5}/, 1);
+}
+
 function unifyArchiveBlock(block: ArchiveBlock, network: string): Block {
 	return {
 		...block,
@@ -201,6 +217,12 @@ export function blocksFilterToArchiveFilter(filter?: BlocksFilter) {
 		return undefined;
 	}
 
+	if ("simplifiedId" in filter) {
+		return {
+			height_eq: parseInt(filter.simplifiedId)
+		};
+	}
+
 	return filter;
 }
 
@@ -209,6 +231,12 @@ export function blocksFilterToExplorerSquidFilter(filter?: BlocksFilter) {
 		return undefined;
 	}
 
+	if ("simplifiedId" in filter) {
+		return {
+			height_eq: parseInt(filter.simplifiedId)
+		};
+	}
+
 	return filter;
 }
 
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index f3e4c4cf..cd96ef14 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -11,12 +11,16 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getCallRuntimeMetadata } from "./runtimeMetadataService";
 import { getNetwork, hasSupport } from "./networksService";
+import { warningAssert } from "../utils/assert";
+import { simplifyId } from "../utils/id";
 
 export type CallsFilter =
-	{ id_eq: string; }
-	| { blockId_eq: string; }
-	| { extrinsicId_eq: string; }
-	| { callerAddress_eq: string; };
+	undefined
+	| { id: string; }
+	| { simplifiedId: string; }
+	| { blockId: string; }
+	| { extrinsicId: string; }
+	| { callerAddress: string; };
 
 export type CallsOrder = string | string[];
 
@@ -143,7 +147,7 @@ async function getArchiveCalls(
 						}
 						extrinsic {
 							id
-							version
+							indexInBlock
 						}
 					}
 				}
@@ -195,6 +199,7 @@ async function getExplorerSquidCalls(
 						}
 						extrinsic {
 							id
+							indexInBlock
 						}
 					}
 				}
@@ -251,6 +256,20 @@ async function addCallArgs(network: string, call: Call|undefined) {
 	};
 }
 
+/**
+ * Get simplified version of call ID which
+ * is used to be displayed to the user.
+ *
+ * It doesn't include block hash and parts have no leading zeros.
+ *
+ * examples:
+ * - 0020537612-000003-5800a        -> 20537612-3
+ * - 0020537612-000003-5800a-000001 -> 20537612-3-1
+ */
+export function simplifyCallId(id: string) {
+	return simplifyId(id, /\d{10}-\d{6}-[^-]{5}(-\d{6})?/, 2);
+}
+
 async function unifyArchiveCall(call: ArchiveCall, network: string): Promise<Call> {
 	const [palletName, callName] = call.name.split(".") as [string, string];
 	const specVersion = call.block.spec.specVersion;
@@ -269,7 +288,6 @@ async function unifyArchiveCall(call: ArchiveCall, network: string): Promise<Cal
 		caller: call.origin && call.origin.kind !== "None"
 			? call.origin.value.value
 			: null,
-		args: null,
 		metadata: {
 			call: await getCallRuntimeMetadata(network, specVersion, palletName, callName)
 		}
@@ -302,19 +320,47 @@ function callsFilterToArchiveFilter(filter?: CallsFilter) {
 		return undefined;
 	}
 
-	if ("blockId_eq" in filter) {
+	if ("simplifiedId" in filter) {
+		console.log(filter);
+		const [blockHeight = "", indexInBlock = "", childIndex = ""] = filter.simplifiedId.split("-");
+
+		const squidFilter: any = {
+			block: {
+				height_eq: parseInt(blockHeight),
+			},
+			extrinsic: {
+				indexInBlock_eq: parseInt(indexInBlock)
+			},
+			parent: {
+				id_isNull: true
+			}
+		};
+
+		if (childIndex) {
+			squidFilter.parent.id_isNull = false;
+			squidFilter.id_endsWith = childIndex.toString();
+		}
+
+		return squidFilter;
+	}
+
+	if ("blockId" in filter) {
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("extrinsicId_eq" in filter) {
+	}
+
+	if ("extrinsicId" in filter) {
 		return {
 			extrinsic: {
-				id_eq: filter.extrinsicId_eq
+				id_eq: filter.extrinsicId
 			}
 		};
-	} else if ("callerAddress_eq" in filter) {
+	}
+
+	if ("callerAddress" in filter) {
 		throw new Error("Filtering by caller public key in archive not implemented");
 	}
 
@@ -327,20 +373,46 @@ function callsFilterToExplorerSquidFilter(filter?: CallsFilter) {
 		return undefined;
 	}
 
-	if ("blockId_eq" in filter) {
+	if ("blockId" in filter) {
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("extrinsicId_eq" in filter) {
+	}
+
+	if ("simplifiedId" in filter) {
+		console.log(filter);
+		const [blockHeight = "", indexInBlock = "", childIndex = ""] = filter.simplifiedId.split("-");
+
+		const squidFilter: any = {
+			block: {
+				height_eq: parseInt(blockHeight),
+			},
+			extrinsic: {
+				indexInBlock_eq: parseInt(indexInBlock)
+			},
+			parentId_isNull: true
+		};
+
+		if (childIndex) {
+			squidFilter.parentId_isNull = false;
+			squidFilter.id_endsWith = childIndex.toString();
+		}
+
+		return squidFilter;
+	}
+
+	if ("extrinsicId" in filter) {
 		return {
 			extrinsic: {
-				id_eq: filter.extrinsicId_eq
+				id_eq: filter.extrinsicId
 			}
 		};
-	} else if ("callerAddress_eq" in filter) {
-		const publicKey = decodeAddress(filter.callerAddress_eq);
+	}
+
+	if ("callerAddress" in filter) {
+		const publicKey = decodeAddress(filter.callerAddress);
 
 		return {
 			callerPublicKey_eq: publicKey
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index f48b0e0f..ff2f6376 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -15,14 +15,17 @@ import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 import { getEventsRuntimeMetadata, getPalletsRuntimeMetadata, getRuntimeEventMetadata } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
+import { simplifyId } from "../utils/id";
 
 export type EventsFilter =
-	{ id_eq: string; }
-	| { blockId_eq: string; }
-	| { callId_eq: string; }
-	| { extrinsicId_eq: string; }
-	| { palletName_eq: string; }
-	| { palletName_eq: string, eventName_eq: string; };
+	undefined
+	| { simplifiedId: string; }
+	| { id: string; }
+	| { blockId: string; }
+	| { callId: string; }
+	| { extrinsicId: string; }
+	| { palletName: string; }
+	| { palletName: string, eventName: string; };
 
 export type EventsOrder = string | string[];
 
@@ -43,8 +46,8 @@ export async function getEventsByName(
 	const {pallet: palletName, event: eventName} = await normalizeEventName(network, name);
 
 	const filter: EventsFilter = eventName
-		? { palletName_eq: palletName, eventName_eq: eventName }
-		: { palletName_eq: palletName };
+		? { palletName: palletName, eventName: eventName }
+		: { palletName: palletName };
 
 
 	if (hasSupport(network, "explorer-squid")) {
@@ -121,6 +124,7 @@ async function getArchiveEvent(network: string, filter: EventsFilter) {
 			events(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
 				id
 				name
+				indexInBlock
 				block {
 					id
 					height
@@ -154,6 +158,7 @@ async function getExplorerSquidEvent(network: string, filter: EventsFilter) {
 				id
 				eventName
 				palletName
+				indexInBlock
 				block {
 					id
 					height
@@ -337,6 +342,20 @@ export async function addEventsArgs(network: string, items: ItemsResponse<Event>
 	};
 }
 
+
+/**
+ * Get simplified version of extrinsic ID
+ * which will be displayed to the user.
+ *
+ * It doesn't include block hash and parts have no leading zeros.
+ *
+ * examples:
+ * - 0020537612-000041-5800a -> 20537612-41
+ */
+export function simplifyEventId(id: string) {
+	return simplifyId(id, /\d{10}-\d{6}-[^-]{5}/, 2);
+}
+
 async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<Event> {
 	const [palletName, eventName] = event.name.split(".") as [string, string];
 	const specVersion = event.block.spec.specVersion;
@@ -351,7 +370,6 @@ async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<
 		eventName,
 		extrinsicId: event.extrinsic?.id || null,
 		callId: event.call?.id || null,
-		args: null,
 		specVersion,
 		metadata: {
 			event: await getRuntimeEventMetadata(network, specVersion, palletName, eventName)
@@ -384,29 +402,46 @@ function eventsFilterToArchiveFilter(filter?: EventsFilter) {
 		return undefined;
 	}
 
-	if ("blockId_eq" in filter) {
+	if ("simplifiedId" in filter) {
+		const [blockHeight = "", indexInBlock = ""] = filter.simplifiedId.split("-");
+
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				height_eq: parseInt(blockHeight),
+			},
+			indexInBlock_eq: parseInt(indexInBlock)
+		};
+	}
+
+	if ("blockId" in filter) {
+		return {
+			block: {
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("callId_eq" in filter) {
+	}
+
+	if ("callId" in filter) {
 		return {
 			call: {
-				id_eq: filter.callId_eq
+				id_eq: filter.callId
 			}
 		};
-	} else if ("extrinsicId_eq" in filter) {
+	}
+
+	if ("extrinsicId" in filter) {
 		return {
 			extrinsic: {
-				id_eq: filter.extrinsicId_eq
+				id_eq: filter.extrinsicId
 			}
 		};
-	} else if ("palletName_eq" in filter) {
+	}
+
+	if ("palletName" in filter) {
 		return {
-			name_eq: ("eventName_eq" in filter)
-				? `${filter.palletName_eq}.${filter.eventName_eq}`
-				: filter.palletName_eq
+			name_eq: ("eventName" in filter)
+				? `${filter.palletName}.${filter.eventName}`
+				: filter.palletName
 		};
 	}
 
@@ -418,22 +453,35 @@ export function eventsFilterToExplorerSquidFilter(filter?: EventsFilter) {
 		return undefined;
 	}
 
-	if ("blockId_eq" in filter) {
+	if ("simplifiedId" in filter) {
+		const [blockHeight = "", indexInBlock = ""] = filter.simplifiedId.split("-");
+
+		return {
+			blockNumber_eq: parseInt(blockHeight),
+			indexInBlock_eq: parseInt(indexInBlock)
+		};
+	}
+
+	if ("blockId" in filter) {
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("callId_eq" in filter) {
+	}
+
+	if ("callId" in filter) {
 		return {
 			call: {
-				id_eq: filter.callId_eq
+				id_eq: filter.callId
 			}
 		};
-	} else if ("extrinsicId_eq" in filter) {
+	}
+
+	if ("extrinsicId" in filter) {
 		return {
 			extrinsic: {
-				id_eq: filter.extrinsicId_eq
+				id_eq: filter.extrinsicId
 			}
 		};
 	}
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index 1c0a3467..03d9d212 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -7,6 +7,7 @@ import { ItemsCounter } from "../model/itemsCounter";
 import { PaginationOptions } from "../model/paginationOptions";
 
 import { decodeAddress } from "../utils/address";
+import { simplifyId } from "../utils/id";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { lowerFirst, upperFirst } from "../utils/string";
 
@@ -16,12 +17,14 @@ import { getCallRuntimeMetadata, getCallsRuntimeMetadata, getPalletsRuntimeMetad
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
 
 export type ExtrinsicsFilter =
-	{ id_eq: string; }
-	| { hash_eq: string; }
-	| { blockId_eq: string; }
-	| { palletName_eq: string; }
-	| { palletName_eq: string, callName_eq: string; }
-	| { signerAddress_eq: string; };
+	undefined
+	| { id: string; }
+	| { simplifiedId: string; }
+	| { hash: string; }
+	| { blockId: string; }
+	| { palletName: string; }
+	| { palletName: string, callName: string; }
+	| { signerAddress: string; };
 
 export type ExtrinsicsOrder = string | string[];
 
@@ -38,8 +41,8 @@ export async function getExtrinsicsByName(
 	const {pallet: palletName, call: callName} = await normalizeExtrinsicName(network, name);
 
 	const filter: ExtrinsicsFilter = callName
-		? { palletName_eq: palletName, callName_eq: callName }
-		: { palletName_eq: palletName };
+		? { palletName, callName }
+		: { palletName };
 
 	if(hasSupport(network, "explorer-squid")) {
 		const counterFilter = callName
@@ -258,6 +261,19 @@ async function getExplorerSquidExtrinsics(
 	return extractConnectionItems(response.extrinsicsConnection, unifyExplorerSquidExtrinsic, network);
 }
 
+/**
+ * Get simplified version of extrinsic ID
+ * which will be displayed to the user.
+ *
+ * It doesn't include block hash and parts have no leading zeros.
+ *
+ * examples:
+ * - 0020537612-000001-5800a -> 20537612-1
+ */
+export function simplifyExtrinsicId(id: string) {
+	return simplifyId(id, /\d{10}-\d{6}-[^-]{5}/, 2);
+}
+
 async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Promise<Extrinsic> {
 	const [palletName, callName] = extrinsic.call.name.split(".") as [string, string];
 	const specVersion = extrinsic.block.spec.specVersion;
@@ -319,14 +335,27 @@ function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 		return undefined;
 	}
 
-	if ("blockId_eq" in filter) {
+	if ("simplifiedId" in filter) {
+		const [blockHeight = "", indexInBlock = ""] = filter.simplifiedId.split("-");
+
+		return {
+			block: {
+				height_eq: parseInt(blockHeight),
+			},
+			indexInBlock_eq: parseInt(indexInBlock)
+		};
+	}
+
+	if ("blockId" in filter) {
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("signerAddress_eq" in filter) {
-		const publicKey = decodeAddress(filter.signerAddress_eq);
+	}
+
+	if ("signerAddress" in filter) {
+		const publicKey = decodeAddress(filter.signerAddress);
 
 		return {
 			OR: [
@@ -334,12 +363,14 @@ function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 				{ signature_jsonContains: `{"address": { "value": "${publicKey}"} }` },
 			],
 		};
-	} else if ("palletName_eq" in filter) {
+	}
+
+	if ("palletName" in filter) {
 		return {
 			call: {
-				name_eq: ("callName_eq" in filter)
-					? `${filter.palletName_eq}.${filter.callName_eq}`
-					: filter.palletName_eq
+				name_eq: ("callName" in filter)
+					? `${filter.palletName}.${filter.callName}`
+					: filter.palletName
 			}
 		};
 	}
@@ -352,23 +383,38 @@ export function extrinsicFilterToExplorerSquidFilter(filter?: ExtrinsicsFilter)
 		return undefined;
 	}
 
-	if ("hash_eq" in filter) {
+	if ("simplifiedId" in filter) {
+		const [blockHeight = "", indexInBlock = ""] = filter.simplifiedId.split("-");
+
 		return {
-			extrinsicHash_eq: filter.hash_eq
+			blockNumber_eq: parseInt(blockHeight),
+			indexInBlock_eq: parseInt(indexInBlock)
 		};
-	} else if ("blockId_eq" in filter) {
+	}
+
+	if ("hash" in filter) {
+		return {
+			extrinsicHash_eq: filter.hash
+		};
+	}
+
+	if ("blockId" in filter) {
 		return {
 			block: {
-				id_eq: filter.blockId_eq
+				id_eq: filter.blockId
 			}
 		};
-	} else if ("signerAddress_eq" in filter) {
-		const publicKey = decodeAddress(filter.signerAddress_eq);
+	}
+
+	if ("signerAddress" in filter) {
+		const publicKey = decodeAddress(filter.signerAddress);
 
 		return {
 			signerPublicKey_eq: publicKey
 		};
-	} else if ("palletName_eq" in filter) {
+	}
+
+	if ("palletName" in filter) {
 		return {
 			mainCall: {
 				...filter
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 851cf4a8..d35f6a98 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -173,8 +173,8 @@ async function searchNetworkByHash(
 	hash: string,
 	pagination: SearchPaginationOptions,
 ) {
-	const blocksFilter: BlocksFilter = {hash_eq: hash};
-	const extrinsicsFilter: ExtrinsicsFilter = {hash_eq: hash};
+	const blocksFilter: BlocksFilter = {hash};
+	const extrinsicsFilter: ExtrinsicsFilter = {hash};
 
 	const blocksCursor = paginationToConnectionCursor(pagination.blocks);
 	const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
@@ -272,7 +272,7 @@ async function searchNetworkByHash(
 }
 
 async function searchNetworkByBlockHeight(network: Network, height: number) {
-	const blocksFilter: BlocksFilter = {height_eq: height};
+	const blocksFilter: BlocksFilter = {height};
 
 	const response = await fetchExplorerSquid<{
 		blocks: ItemsConnection<ExplorerSquidBlock, true>,
@@ -385,20 +385,20 @@ async function searchNetworkByName(
 		}
 	);
 
-	let extrinsicsFilter: ExtrinsicsFilter = {id_eq: ""}; // default failing filter
-	let eventsFilter: EventsFilter = {id_eq: ""}; // default failing filter
+	let extrinsicsFilter: ExtrinsicsFilter = {id: ""}; // default failing filter
+	let eventsFilter: EventsFilter = {id: ""}; // default failing filter
 
 	if (fetchAll) {
 		if (countersResponse.extrinsicsByNameCounter?.total) {
 			extrinsicsFilter = extrinsicName.call
-				? { palletName_eq: extrinsicName.pallet, callName_eq: extrinsicName.call }
-				: { palletName_eq: extrinsicName.pallet };
+				? { palletName: extrinsicName.pallet, callName: extrinsicName.call }
+				: { palletName: extrinsicName.pallet };
 		}
 
 		if (countersResponse.eventsByNameCounter?.total) {
 			eventsFilter = eventName.event
-				? { palletName_eq: eventName.pallet, eventName_eq: eventName.event }
-				: { palletName_eq: eventName.pallet };
+				? { palletName: eventName.pallet, eventName: eventName.event }
+				: { palletName: eventName.pallet };
 		}
 	}
 
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index a6435029..dedfa3c9 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -13,7 +13,7 @@ import { fetchArchive, fetchMainSquid } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 
 export type TransfersFilter =
-	{ accountAddress_eq: string };
+	{ accountAddress: string };
 
 export type TransfersOrder = string | string[];
 
@@ -84,24 +84,7 @@ async function getMainSquidTransfers(
 		}
 	);
 
-	const items = await extractConnectionItems(response.transfersConnection, unifyMainSquidTransfer, network);
-	const transfers = await addExtrinsicsInfo(network, items);
-
-	return transfers;
-}
-
-async function addExtrinsicsInfo(network: string, items: ItemsResponse<Omit<Transfer, "extrinsic">>) {
-	const extrinsicHashes = items.data.map((transfer) => transfer.extrinsicHash).filter(Boolean) as string[];
-
-	const extrinsicsInfoByHash = await getArchiveExtrinsicsInfo(network, extrinsicHashes);
-
-	return {
-		...items,
-		data: items.data.map(transfer => ({
-			...transfer,
-			extrinsic: transfer.extrinsicHash ? extrinsicsInfoByHash[transfer.extrinsicHash] : null
-		}))
-	};
+	return await extractConnectionItems(response.transfersConnection, unifyMainSquidTransfer, network);
 }
 
 async function getArchiveExtrinsicsInfo(network: string, extrinsicHashes: string[]) {
@@ -125,11 +108,12 @@ async function getArchiveExtrinsicsInfo(network: string, extrinsicHashes: string
 	}, {} as Record<string, any>);
 }
 
-function unifyMainSquidTransfer(transfer: MainSquidTransfer, networkName: string): Omit<Transfer, "extrinsic"> {
+function unifyMainSquidTransfer(transfer: MainSquidTransfer, networkName: string): Transfer {
 	const network = getNetwork(networkName);
 
 	return {
 		...transfer,
+		eventId: transfer.transfer.id,
 		accountPublicKey: transfer.account.publicKey,
 		blockNumber: transfer.transfer.blockNumber,
 		timestamp: transfer.transfer.timestamp,
@@ -146,8 +130,8 @@ function transfersFilterToMainSquidFilter(filter?: TransfersFilter) {
 		return undefined;
 	}
 
-	if ("accountAddress_eq" in filter) {
-		const publicKey = decodeAddress(filter.accountAddress_eq);
+	if ("accountAddress" in filter) {
+		const publicKey = decodeAddress(filter.accountAddress);
 
 		return {
 			account: {
diff --git a/src/utils/id.ts b/src/utils/id.ts
new file mode 100644
index 00000000..d9ff5efd
--- /dev/null
+++ b/src/utils/id.ts
@@ -0,0 +1,11 @@
+export function simplifyId(id: string, pattern: RegExp, blockHashIndex: number) {
+	if (!id.match(pattern)) {
+		// already simplified
+		return id;
+	}
+
+	const parts = id.split("-");
+	parts.splice(blockHashIndex, 1); // remove block hash part
+
+	return parts.map(it => it.replace(/^0+/, "") || "0").join("-");
+}

From 48f935e1054bdc653583890fcde32dbae36bea56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 14 Nov 2023 13:59:32 +0100
Subject: [PATCH 18/21] fix pagination

---
 src/components/ItemsTable.tsx                 |  2 +-
 .../account/AccountBalancesTable.tsx          |  5 +-
 src/model/pageInfo.ts                         |  3 +-
 src/services/balancesService.ts               |  7 ++-
 src/services/blocksService.ts                 | 14 ++++-
 src/services/callsService.ts                  | 14 ++++-
 src/services/eventsService.ts                 | 15 +++++-
 src/services/extrinsicsService.ts             | 14 ++++-
 src/services/searchService.ts                 | 51 +++++++++++++------
 src/services/transfersService.ts              | 26 ++--------
 src/utils/itemsConnection.ts                  | 18 +++----
 src/utils/itemsResponse.ts                    |  5 +-
 12 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index 22b1693e..3fd81cff 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -191,7 +191,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 				<TablePagination
 					page={pageInfo.page}
 					pageSize={pageInfo.pageSize}
-					hasNextPage={pageInfo.hasNextPage}
+					hasNextPage={pageInfo.hasNext}
 					onPageChange={onPageChange}
 				/>
 			)}
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index 20e95f74..d7a9c49b 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -101,8 +101,9 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 	const pageInfo = useMemo<PageInfo>(() => ({
 		page: pagination.page,
 		pageSize: pagination.pageSize,
-		hasNextPage: pagination.page * pagination.pageSize < data.length,
-		totalPageCount: Math.ceil(data.length / pagination.pageSize)
+		totalPageCount: Math.ceil(data.length / pagination.pageSize),
+		hasPrevious: pagination.page > 0,
+		hasNext: pagination.page * pagination.pageSize < data.length,
 	}), [data, pagination]);
 
 	const handleSortSelected = useCallback((value: SortOrder<SortProperty<AccountBalance>>) => {
diff --git a/src/model/pageInfo.ts b/src/model/pageInfo.ts
index 00d147a7..b3f9d89c 100644
--- a/src/model/pageInfo.ts
+++ b/src/model/pageInfo.ts
@@ -1,6 +1,7 @@
 export type PageInfo = {
 	page: number;
 	pageSize: number;
-	hasNextPage: boolean;
 	totalPageCount: number|undefined;
+	hasPrevious: boolean;
+	hasNext: boolean;
 }
diff --git a/src/services/balancesService.ts b/src/services/balancesService.ts
index ea774a73..22bf645e 100644
--- a/src/services/balancesService.ts
+++ b/src/services/balancesService.ts
@@ -58,7 +58,12 @@ export async function getBalances(
 			}
 		);
 
-		const balances = extractConnectionItems(response.accountsConnection, unifyStatsSquidAccountBalance, network);
+		const balances = extractConnectionItems(
+			response.accountsConnection,
+			pagination,
+			unifyStatsSquidAccountBalance,
+			network
+		);
 
 		return balances;
 	}
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index 7f2fc5fa..797ff2c2 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -134,7 +134,12 @@ async function getArchiveBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyArchiveBlock, network);
+	const blocks = extractConnectionItems(
+		response.blocksConnection,
+		pagination,
+		unifyArchiveBlock,
+		network
+	);
 
 	return blocks;
 }
@@ -179,7 +184,12 @@ async function getExplorerSquidBlocks(
 		}
 	);
 
-	const blocks = extractConnectionItems(response.blocksConnection, unifyExplorerSquidBlock, network);
+	const blocks = extractConnectionItems(
+		response.blocksConnection,
+		pagination,
+		unifyExplorerSquidBlock,
+		network
+	);
 
 	return blocks;
 }
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index cd96ef14..94442c93 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -168,7 +168,12 @@ async function getArchiveCalls(
 		}
 	);
 
-	return extractConnectionItems(response?.callsConnection, unifyArchiveCall, network);
+	return extractConnectionItems(
+		response.callsConnection,
+		pagination,
+		unifyArchiveCall,
+		network
+	);
 }
 
 async function getExplorerSquidCalls(
@@ -220,7 +225,12 @@ async function getExplorerSquidCalls(
 		}
 	);
 
-	return extractConnectionItems(response.callsConnection, unifyExplorerSquidCall, network);
+	return extractConnectionItems(
+		response.callsConnection,
+		pagination,
+		unifyExplorerSquidCall,
+		network
+	);
 }
 
 async function getArchiveCallsArgs(network: string, callsIds: string[]) {
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index ff2f6376..25ba33ea 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -235,7 +235,12 @@ async function getArchiveEvents(
 		}
 	);
 
-	return extractConnectionItems(response.eventsConnection, unifyArchiveEvent, network);
+	return extractConnectionItems(
+		response.eventsConnection,
+		pagination,
+		unifyArchiveEvent,
+		network
+	);
 }
 
 async function getExplorerSquidEvents(
@@ -287,7 +292,13 @@ async function getExplorerSquidEvents(
 		}
 	);
 
-	const data = await extractConnectionItems(response.eventsConnection, unifyExplorerSquidEvent, network);
+	const data = await extractConnectionItems(
+		response.eventsConnection,
+		pagination,
+		unifyExplorerSquidEvent,
+		network
+	);
+
 	const events = await addEventsArgs(network, data);
 
 	return events;
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index 03d9d212..a5979f59 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -201,7 +201,12 @@ async function getArchiveExtrinsics(
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, unifyArchiveExtrinsic, network);
+	return extractConnectionItems(
+		response.extrinsicsConnection,
+		pagination,
+		unifyArchiveExtrinsic,
+		network
+	);
 }
 
 async function getExplorerSquidExtrinsics(
@@ -258,7 +263,12 @@ async function getExplorerSquidExtrinsics(
 		}
 	);
 
-	return extractConnectionItems(response.extrinsicsConnection, unifyExplorerSquidExtrinsic, network);
+	return extractConnectionItems(
+		response.extrinsicsConnection,
+		pagination,
+		unifyExplorerSquidExtrinsic,
+		network
+	);
 }
 
 /**
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index d35f6a98..c3d41f6b 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -80,8 +80,9 @@ export async function search(query: string, networks: Network[], pagination: Sea
 					pageInfo: {
 						page: 1,
 						pageSize: 10, // TODO constant
-						hasNextPage: false,
-						totalPageCount: 1
+						totalPageCount: 1,
+						hasPrevious: false,
+						hasNext: false,
 					},
 					totalCount: 1
 				},
@@ -159,9 +160,9 @@ async function searchNetwork(
 	if (isHex(query)) {
 		return searchNetworkByHash(network, query, pagination);
 	} else if (query?.match(/^\d+$/)) {
-		return searchNetworkByBlockHeight(network, parseInt(query));
+		return searchNetworkByBlockHeight(network, parseInt(query), pagination);
 	} else if (isEncodedAddress(network, query)) {
-		return searchNetworkByEncodedAddress(network, query);
+		return searchNetworkByEncodedAddress(network, query, pagination);
 	} else {
 		return searchNetworkByName(network, query, pagination, fetchAll);
 	}
@@ -256,8 +257,19 @@ async function searchNetworkByHash(
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
-	const extrinsics = await extractConnectionItems(response.extrinsics, unifyExplorerSquidExtrinsic, network.name);
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyExplorerSquidBlock,
+		network.name
+	);
+
+	const extrinsics = await extractConnectionItems(
+		response.extrinsics,
+		pagination.extrinsics,
+		unifyExplorerSquidExtrinsic,
+		network.name
+	);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -271,7 +283,7 @@ async function searchNetworkByHash(
 	return result;
 }
 
-async function searchNetworkByBlockHeight(network: Network, height: number) {
+async function searchNetworkByBlockHeight(network: Network, height: number, pagination: SearchPaginationOptions) {
 	const blocksFilter: BlocksFilter = {height};
 
 	const response = await fetchExplorerSquid<{
@@ -305,7 +317,12 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 		}
 	);
 
-	const blocks = await extractConnectionItems(response.blocks, unifyExplorerSquidBlock, network.name);
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyExplorerSquidBlock,
+		network.name
+	);
 
 	const result: NetworkSearchResult = {
 		network,
@@ -319,7 +336,7 @@ async function searchNetworkByBlockHeight(network: Network, height: number) {
 	return result;
 }
 
-async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string) {
+async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string, pagination: SearchPaginationOptions) {
 	const result: NetworkSearchResult = {
 		network,
 		accounts: {
@@ -330,10 +347,11 @@ async function searchNetworkByEncodedAddress(network: Network, encodedAddress: s
 				identity: null
 			}],
 			pageInfo: {
-				page: 1,
-				pageSize: 10,
-				hasNextPage: false,
-				totalPageCount: 1
+				page: pagination.accounts.page,
+				pageSize: pagination.accounts.pageSize,
+				totalPageCount: 1,
+				hasPrevious: false,
+				hasNext: false,
 			},
 			totalCount: 1
 		},
@@ -491,6 +509,7 @@ async function searchNetworkByName(
 
 	const extrinsics = await extractConnectionItems(
 		response.extrinsics,
+		pagination.extrinsics,
 		unifyExplorerSquidExtrinsic,
 		network.name
 	);
@@ -499,6 +518,7 @@ async function searchNetworkByName(
 		network.name,
 		await extractConnectionItems(
 			response.events,
+			pagination.events,
 			unifyExplorerSquidEvent,
 			network.name
 		)
@@ -571,8 +591,9 @@ function networkResultsToSearchResultItems<T extends {id: string, network: Netwo
 		pageInfo: {
 			page: pagination.page,
 			pageSize: pagination.pageSize,
-			hasNextPage: pagination.page * pagination.pageSize < data.length,
-			totalPageCount: Math.ceil(data.length / pagination.pageSize)
+			totalPageCount: Math.ceil(data.length / pagination.pageSize),
+			hasPrevious: pagination.page > 0,
+			hasNext: pagination.page * pagination.pageSize < data.length,
 		},
 		totalCount
 	};
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index dedfa3c9..aac73c6a 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -84,28 +84,12 @@ async function getMainSquidTransfers(
 		}
 	);
 
-	return await extractConnectionItems(response.transfersConnection, unifyMainSquidTransfer, network);
-}
-
-async function getArchiveExtrinsicsInfo(network: string, extrinsicHashes: string[]) {
-	const response = await fetchArchive<{extrinsics: {id: string, hash: string}[]}>(
-		network,
-		`query($hashes: [String!], $limit: Int!) {
-			extrinsics(where: { hash_in: $hashes }, limit: $limit) {
-				id,
-				hash
-			}
-		}`,
-		{
-			hashes: extrinsicHashes,
-			limit: extrinsicHashes.length
-		}
+	return await extractConnectionItems(
+		response.transfersConnection,
+		pagination,
+		unifyMainSquidTransfer,
+		network
 	);
-
-	return response.extrinsics.reduce((extrinsicInfoByHash, extrinsic) => {
-		extrinsicInfoByHash[extrinsic.hash] = extrinsic;
-		return extrinsicInfoByHash;
-	}, {} as Record<string, any>);
 }
 
 function unifyMainSquidTransfer(transfer: MainSquidTransfer, networkName: string): Transfer {
diff --git a/src/utils/itemsConnection.ts b/src/utils/itemsConnection.ts
index b864c179..42bd0e3d 100644
--- a/src/utils/itemsConnection.ts
+++ b/src/utils/itemsConnection.ts
@@ -16,6 +16,7 @@ export function paginationToConnectionCursor(pagination: PaginationOptions) {
 
 export async function extractConnectionItems<R = any, T = any, A extends any[] = any[], C extends boolean = false>(
 	connection: ItemsConnection<T, C>,
+	pagination: PaginationOptions,
 	transformNode: (node: T, ...a: A) => R|Promise<R>,
 	...additionalArgs: A
 ): Promise<ItemsResponse<R, C>> {
@@ -25,23 +26,18 @@ export async function extractConnectionItems<R = any, T = any, A extends any[] =
 		data.push(await transformNode(edge.node, ...additionalArgs));
 	}
 
-	const startIndex = parseInt(connection.pageInfo.startCursor || "1") - 1;
-	const endIndex = parseInt(connection.pageInfo.endCursor || "1"); // non-inclusive
-
-	const pageSize = (endIndex - startIndex);
-	const page = Math.floor(startIndex / pageSize) + 1;
-
 	const totalPageCount = connection.totalCount
-		? Math.ceil(connection.totalCount / pageSize)
+		? Math.ceil(connection.totalCount / pagination.pageSize)
 		: undefined;
 
 	return {
 		data,
 		pageInfo: {
-			page,
-			pageSize,
-			hasNextPage: connection.pageInfo.hasNextPage,
-			totalPageCount
+			page: pagination.page,
+			pageSize: pagination.pageSize,
+			totalPageCount,
+			hasPrevious: connection.pageInfo.hasNextPage,
+			hasNext: connection.pageInfo.hasNextPage,
 		},
 		totalCount: connection.totalCount
 	} as ItemsResponse<R, C>;
diff --git a/src/utils/itemsResponse.ts b/src/utils/itemsResponse.ts
index b52802dd..09f277fc 100644
--- a/src/utils/itemsResponse.ts
+++ b/src/utils/itemsResponse.ts
@@ -8,8 +8,9 @@ export function emptyItemsResponse(totalCount?: number): ItemsResponse<never> {
 		pageInfo: {
 			page: 1,
 			pageSize: 10, // TODO constant
-			hasNextPage: false,
-			totalPageCount: 0
+			totalPageCount: 0,
+			hasPrevious: false,
+			hasNext: false,
 		},
 		totalCount,
 	};

From da6fe6c0527c4bb7c36eb304c7b95ec22e47cd27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 14 Nov 2023 18:33:31 +0100
Subject: [PATCH 19/21] add search support for archive only networks for some
 query types & refactoring

---
 src/hooks/useEventsByName.ts      |  12 -
 src/hooks/useExtrinsicsByName.ts  |  12 -
 src/screens/search.tsx            |  56 +++-
 src/services/blocksService.ts     | 111 ++++----
 src/services/callsService.ts      | 167 +++++-------
 src/services/eventsService.ts     | 215 +++++----------
 src/services/extrinsicsService.ts | 235 ++++++-----------
 src/services/fetchService.ts      |  40 ++-
 src/services/searchService.ts     | 417 +++++++++++++++---------------
 src/services/transfersService.ts  |  56 ++--
 src/utils/fetchGraphql.ts         |  24 +-
 11 files changed, 608 insertions(+), 737 deletions(-)
 delete mode 100644 src/hooks/useEventsByName.ts
 delete mode 100644 src/hooks/useExtrinsicsByName.ts

diff --git a/src/hooks/useEventsByName.ts b/src/hooks/useEventsByName.ts
deleted file mode 100644
index f2bc5b72..00000000
--- a/src/hooks/useEventsByName.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { EventsOrder, getEventsByName } from "../services/eventsService";
-
-import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
-
-export function useEventsByName(
-	network: string,
-	name: string,
-	order?: EventsOrder,
-	options?: UsePaginatedResourceOptions
-) {
-	return usePaginatedResource(getEventsByName, [network, name, order], options);
-}
diff --git a/src/hooks/useExtrinsicsByName.ts b/src/hooks/useExtrinsicsByName.ts
deleted file mode 100644
index 085e6711..00000000
--- a/src/hooks/useExtrinsicsByName.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ExtrinsicsOrder, getExtrinsicsByName } from "../services/extrinsicsService";
-
-import { UsePaginatedResourceOptions, usePaginatedResource } from "./usePaginatedResource";
-
-export function useExtrinsicsByName(
-	network: string,
-	name: string,
-	order?: ExtrinsicsOrder,
-	options?: UsePaginatedResourceOptions
-) {
-	return usePaginatedResource(getExtrinsicsByName, [network, name, order], options);
-}
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 638edf21..38316c4a 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
+import { Alert, AlertTitle } from "@mui/material";
 import { css } from "@emotion/react";
 
 import { Card, CardHeader } from "../components/Card";
@@ -19,7 +20,8 @@ import { usePage } from "../hooks/usePage";
 import { useSearch } from "../hooks/useSearch";
 import { useTab } from "../hooks/useTab";
 
-import { getNetworks } from "../services/networksService";
+import { getNetworks, hasSupport } from "../services/networksService";
+import { getQueryType } from "../services/searchService";
 
 import { isDeepEqual } from "../utils/equal";
 
@@ -61,7 +63,9 @@ const queryStyle2 = css`
 const networkStyle = css`
 	padding: 4px 8px;
 	background-color: #f5f5f5;
+	background-color: rgba(0, 0, 0, .045);
 	border-radius: 8px;
+	font-size: 1rem;
 
 	white-space: nowrap;
 `;
@@ -95,12 +99,24 @@ const resultsStyle = css`
 	margin-top: 32px;
 `;
 
+const unsupportAlertStyle = css`
+	margin-top: 32px;
+	padding: 16px 24px;
+`;
+
+const unsupportAlertNetworks = css`
+	margin-top: 20px;
+	font-size: 1rem;
+`;
+
 export const SearchPage = () => {
 	const [qs] = useSearchParams();
 
 	const query = qs.get("query") || "";
 	const networkNames = qs.getAll("network");
 
+	const networks = getNetworks(networkNames.length > 0 ? networkNames : undefined);
+
 	const [tab, setTab] = useTab({
 		preserveQueryParams: ["query", "network"]
 	});
@@ -114,7 +130,7 @@ export const SearchPage = () => {
 
 	const [forceLoading, setForceLoading] = useState<boolean>(true);
 
-	const searchResult = useSearch(query, getNetworks(networkNames), {
+	const searchResult = useSearch(query, networks, {
 		pagination: {
 			accounts: {
 				page: tab === "accounts" ? page : 1,
@@ -140,6 +156,10 @@ export const SearchPage = () => {
 
 	console.log("results", searchResult);
 
+	const searchByNameUnsupportNetworks = networks.filter(it =>
+		getQueryType(it, query) === "name" && !hasSupport(it.name, "explorer-squid")
+	);
+
 	useEffect(() => {
 		// show loading at least for 1s to prevent flickering
 		setForceLoading(true);
@@ -195,25 +215,41 @@ export const SearchPage = () => {
 				</CardHeader>
 				<div css={searchDetailsStyle}>
 					For query <code css={queryStyle2}>{query}</code> in {" "}
-					{networkNames.length === 0 && <span>all networks.</span>}
-					{networkNames.length > 0 && (
+					{networks.length === getNetworks().length && <span>all networks.</span>}
+					{networks.length < getNetworks().length && (
 						<>
-							{getNetworks(networkNames).slice(0, 5).map((it, index) =>
+							{networks.map((it, index) =>
 								<Fragment key={it.name}>
 									<span css={networkStyle}>
 										<img src={it.icon} css={iconStyle} /> {it.displayName}
 									</span>
-									{index <= networkNames.length - 3 && <span>, </span>}
-									{index === networkNames.length - 2 && <span> and </span>}
+									{index <= networks.length - 3 && <span>, </span>}
+									{index === networks.length - 2 && <span> and </span>}
 								</Fragment>
-							)} network{networkNames.length > 1 && <span>s</span>}.
+							)} network{networks.length > 1 && <span>s</span>}.
 						</>
 					)}
 				</div>
+				{searchByNameUnsupportNetworks.length > 0 && (
+					<Alert severity="warning" css={unsupportAlertStyle}>
+						<AlertTitle>The following networks don't currently support searching for extrinsics and events by name.</AlertTitle>
+						<div css={unsupportAlertNetworks}>
+							{searchByNameUnsupportNetworks.map((it, index, list) =>
+								<Fragment key={it.name}>
+									<span css={networkStyle}>
+										<img src={it.icon} css={iconStyle} /> {it.displayName}
+									</span>
+									{index <= list.length - 3 && <span>, </span>}
+									{index === list.length - 2 && <span> and </span>}
+								</Fragment>
+							)}
+						</div>
+					</Alert>
+				)}
 				{searchResult.error && (
 					<Card>
 						<ErrorMessage
-							message={<>Unexpected error occured</>}
+							message="Unexpected error occured."
 							details={searchResult.error}
 							report
 						/>
@@ -222,7 +258,7 @@ export const SearchPage = () => {
 				{searchResult.data?.errors && searchResult.data?.errors.length > 0 && (
 					<ErrorMessage
 						css={errorStyle}
-						message={<>Unexpected error occured while searching some networks</>}
+						message="Unexpected error occured while searching some networks."
 						details={searchResult.data.errors}
 						report
 					/>
diff --git a/src/services/blocksService.ts b/src/services/blocksService.ts
index 797ff2c2..287abdcc 100644
--- a/src/services/blocksService.ts
+++ b/src/services/blocksService.ts
@@ -7,12 +7,11 @@ import { simplifyId } from "../utils/id";
 
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
-import { fetchArchive, fetchExplorerSquid } from "./fetchService";
+import { fetchArchive, fetchExplorerSquid, registerItemFragment, registerItemsConnectionFragment } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 
 export type BlocksFilter =
 	undefined
-	| { id: string; }
 	| { simplifiedId: string; }
 	| { hash: string; }
 	| { height: number; };
@@ -42,20 +41,37 @@ export async function getBlocks(
 
 /*** PRIVATE ***/
 
+registerItemFragment("ArchiveBlock", "Block", `
+	id
+	hash
+	height
+	timestamp
+	parentHash
+	validator
+	spec {
+		specVersion
+	}
+`);
+
+registerItemFragment("ExplorerSquidBlock", "Block", `
+	id
+	hash
+	height
+	timestamp
+	parentHash
+	validator
+	specVersion
+`);
+
+registerItemsConnectionFragment("ArchiveBlocksConnection", "BlocksConnection", "...ArchiveBlock");
+registerItemsConnectionFragment("ExplorerSquidBlocksConnection", "BlocksConnection", "...ExplorerSquidBlock");
+
 async function getArchiveBlock(network: string, filter: BlocksFilter) {
 	const response = await fetchArchive<{blocks: ArchiveBlock[]}>(
 		network,
 		`query ($filter: BlockWhereInput) {
 			blocks(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				hash
-				height
-				timestamp
-				parentHash
-				validator
-				spec {
-					specVersion
-				}
+				...ArchiveBlock
 			}
 		}`,
 		{
@@ -73,13 +89,7 @@ async function getExplorerSquidBlock(network: string, filter: BlocksFilter) {
 		network,
 		`query ($filter: BlockWhereInput) {
 			blocks(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				hash
-				height
-				timestamp
-				parentHash
-				validator
-				specVersion
+				...ExplorerSquidBlock
 			}
 		}`,
 		{
@@ -104,25 +114,7 @@ async function getArchiveBlocks(
 		network,
 		`query ($first: Int!, $after: String, $filter: BlockWhereInput, $order: [BlockOrderByInput!]!) {
 			blocksConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						hash
-						height
-						timestamp
-						parentHash
-						validator
-						spec {
-							specVersion
-						}
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ArchiveBlocksConnection
 				${filter !== undefined ? "totalCount" : "" }
 			}
 		}`,
@@ -156,23 +148,7 @@ async function getExplorerSquidBlocks(
 		network,
 		`query ($first: Int!, $after: String, $filter: BlockWhereInput, $order: [BlockOrderByInput!]!) {
 			blocksConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						hash
-						height
-						timestamp
-						parentHash
-						validator
-						specVersion
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidBlocksConnection
 				${filter !== undefined ? "totalCount" : "" }
 			}
 		}`,
@@ -207,7 +183,7 @@ export function simplifyBlockId(id: string) {
 	return simplifyId(id, /\d{10}-[^-]{5}/, 1);
 }
 
-function unifyArchiveBlock(block: ArchiveBlock, network: string): Block {
+export function unifyArchiveBlock(block: ArchiveBlock, network: string): Block {
 	return {
 		...block,
 		network: getNetwork(network),
@@ -233,6 +209,18 @@ export function blocksFilterToArchiveFilter(filter?: BlocksFilter) {
 		};
 	}
 
+	if ("hash" in filter) {
+		return {
+			hash_eq: filter.hash
+		};
+	}
+
+	if ("height" in filter) {
+		return {
+			height_eq: filter.height
+		};
+	}
+
 	return filter;
 }
 
@@ -247,6 +235,17 @@ export function blocksFilterToExplorerSquidFilter(filter?: BlocksFilter) {
 		};
 	}
 
+	if ("hash" in filter) {
+		return {
+			hash_eq: filter.hash
+		};
+	}
+
+	if ("height" in filter) {
+		return {
+			height_eq: filter.height
+		};
+	}
+
 	return filter;
 }
-
diff --git a/src/services/callsService.ts b/src/services/callsService.ts
index 94442c93..2c20c2ef 100644
--- a/src/services/callsService.ts
+++ b/src/services/callsService.ts
@@ -6,17 +6,15 @@ import { ItemsConnection } from "../model/itemsConnection";
 import { PaginationOptions } from "../model/paginationOptions";
 
 import { decodeAddress } from "../utils/address";
+import { simplifyId } from "../utils/id";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 
-import { fetchArchive, fetchExplorerSquid } from "./fetchService";
+import { fetchArchive, fetchExplorerSquid, registerItemFragment, registerItemsConnectionFragment } from "./fetchService";
 import { getCallRuntimeMetadata } from "./runtimeMetadataService";
 import { getNetwork, hasSupport } from "./networksService";
-import { warningAssert } from "../utils/assert";
-import { simplifyId } from "../utils/id";
 
 export type CallsFilter =
 	undefined
-	| { id: string; }
 	| { simplifiedId: string; }
 	| { blockId: string; }
 	| { extrinsicId: string; }
@@ -47,30 +45,57 @@ export async function getCalls(
 
 /*** PRIVATE ***/
 
+registerItemFragment("ArchiveCall", "Call", `
+	id
+	name
+	success
+	origin
+	args
+	block {
+		timestamp
+		id
+		height
+		spec {
+			specVersion
+		}
+	}
+	parent {
+		id
+	}
+	extrinsic {
+		id
+		indexInBlock
+	}
+`);
+
+registerItemFragment("ExplorerSquidCall", "Call", `
+	id
+	callName
+	palletName
+	success
+	callerPublicKey
+	parentId
+	block {
+		id
+		height
+		timestamp
+		specVersion
+	}
+	extrinsic {
+		id
+		indexInBlock
+	}
+`);
+
+registerItemsConnectionFragment("ArchiveCallsConnection", "CallsConnection", "...ArchiveCall");
+registerItemsConnectionFragment("ExplorerSquidCallsConnection", "CallsConnection", "...ExplorerSquidCall");
+
 async function getArchiveCall(network: string, filter: CallsFilter) {
 	const response = await fetchArchive<{calls: ArchiveCall[]}>(
 		network,
 		`query ($filter: CallWhereInput) {
 			calls(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				name
-				success
-				origin
-				args
-				block {
-					timestamp
-					id
-					height
-					spec {
-						specVersion
-					}
-				}
-				parent {
-					id
-				}
-				extrinsic {
-					id
-				}
+				...ArchiveCall
 			}
 		}`,
 		{
@@ -86,21 +111,7 @@ async function getExplorerSquidCall(network: string, filter: CallsFilter) {
 		network,
 		`query ($filter: CallWhereInput) {
 			calls(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				callName
-				palletName
-				success
-				callerPublicKey
-				parentId
-				block {
-					id
-					height
-					timestamp
-					specVersion
-				}
-				extrinsic {
-					id
-				}
+				...ExplorerSquidCall
 			}
 		}`,
 		{
@@ -126,37 +137,7 @@ async function getArchiveCalls(
 		network,
 		`query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {
 			callsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						name
-						success
-						origin
-						args
-						block {
-							timestamp
-							id
-							height
-							spec {
-								specVersion
-							}
-						}
-						parent {
-							id
-							name
-						}
-						extrinsic {
-							id
-							indexInBlock
-						}
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ArchiveCallsConnection
 				totalCount
 			}
 		}`,
@@ -188,32 +169,7 @@ async function getExplorerSquidCalls(
 		network,
 		`query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {
 			callsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						callName
-						palletName
-						success
-						callerPublicKey
-						parentId
-						block {
-							id
-							height
-							timestamp
-							specVersion
-						}
-						extrinsic {
-							id
-							indexInBlock
-						}
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidCallsConnection
 				totalCount
 			}
 		}`,
@@ -371,7 +327,10 @@ function callsFilterToArchiveFilter(filter?: CallsFilter) {
 	}
 
 	if ("callerAddress" in filter) {
-		throw new Error("Filtering by caller public key in archive not implemented");
+		console.warn("Filtering calls by caller public key in archive is not implemented");
+		return {
+			id_eq: "" // failing filter
+		};
 	}
 
 
@@ -383,14 +342,6 @@ function callsFilterToExplorerSquidFilter(filter?: CallsFilter) {
 		return undefined;
 	}
 
-	if ("blockId" in filter) {
-		return {
-			block: {
-				id_eq: filter.blockId
-			}
-		};
-	}
-
 	if ("simplifiedId" in filter) {
 		console.log(filter);
 		const [blockHeight = "", indexInBlock = "", childIndex = ""] = filter.simplifiedId.split("-");
@@ -413,6 +364,14 @@ function callsFilterToExplorerSquidFilter(filter?: CallsFilter) {
 		return squidFilter;
 	}
 
+	if ("blockId" in filter) {
+		return {
+			block: {
+				id_eq: filter.blockId
+			}
+		};
+	}
+
 	if ("extrinsicId" in filter) {
 		return {
 			extrinsic: {
diff --git a/src/services/eventsService.ts b/src/services/eventsService.ts
index 25ba33ea..3a8401e7 100644
--- a/src/services/eventsService.ts
+++ b/src/services/eventsService.ts
@@ -3,24 +3,21 @@ import { ExplorerSquidEvent } from "../model/explorer-squid/explorerSquidEvent";
 
 import { Event } from "../model/event";
 import { ItemsConnection } from "../model/itemsConnection";
-import { ItemsCounter } from "../model/itemsCounter";
 import { ItemsResponse } from "../model/itemsResponse";
 import { PaginationOptions } from "../model/paginationOptions";
 
+import { simplifyId } from "../utils/id";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
-import { emptyItemsResponse } from "../utils/itemsResponse";
 import { upperFirst } from "../utils/string";
 
-import { fetchArchive, fetchExplorerSquid } from "./fetchService";
+import { fetchArchive, fetchExplorerSquid, registerItemFragment, registerItemsConnectionFragment } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 import { getEventsRuntimeMetadata, getPalletsRuntimeMetadata, getRuntimeEventMetadata } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
-import { simplifyId } from "../utils/id";
 
 export type EventsFilter =
 	undefined
 	| { simplifiedId: string; }
-	| { id: string; }
 	| { blockId: string; }
 	| { callId: string; }
 	| { extrinsicId: string; }
@@ -37,50 +34,6 @@ export async function getEvent(network: string, filter: EventsFilter) {
 	return getArchiveEvent(network, filter);
 }
 
-export async function getEventsByName(
-	network: string,
-	name: string,
-	order: EventsOrder = "id_DESC",
-	pagination: PaginationOptions
-): Promise<ItemsResponse<Event>> {
-	const {pallet: palletName, event: eventName} = await normalizeEventName(network, name);
-
-	const filter: EventsFilter = eventName
-		? { palletName: palletName, eventName: eventName }
-		: { palletName: palletName };
-
-
-	if (hasSupport(network, "explorer-squid")) {
-		const counterFilter = eventName
-			? `Events.${palletName}.${eventName}`
-			: `Events.${palletName}`;
-
-		// this call is divided on purpose, otherwise it would timeout when there are no events found.
-		const countResponse = await fetchExplorerSquid<{itemsCounterById: ItemsCounter|null}>(
-			network,
-			`query ($counterFilter: String!) {
-				itemsCounterById(id: $counterFilter) {
-					total
-				}
-			}`,
-			{
-				counterFilter,
-			}
-		);
-
-		if (countResponse.itemsCounterById === null || countResponse.itemsCounterById.total === 0) {
-			return emptyItemsResponse();
-		}
-
-		const events = await getExplorerSquidEvents(network, filter, order, pagination, false);
-		events.totalCount = countResponse.itemsCounterById.total;
-
-		return events;
-	}
-
-	return getArchiveEvents(network, filter, order, pagination, false);
-}
-
 export async function getEvents(
 	network: string,
 	filter: EventsFilter,
@@ -117,29 +70,55 @@ export async function normalizeEventName(network: string, name: string) {
 
 /*** PRIVATE ***/
 
+registerItemFragment("ArchiveEvent", "Event", `
+	id
+	name
+	indexInBlock
+	block {
+		id
+		height
+		timestamp
+		spec {
+			specVersion
+		}
+	}
+	extrinsic {
+		id
+	}
+	call {
+		id
+	}
+	args
+`);
+
+registerItemFragment("ExplorerSquidEvent", "Event", `
+	id
+	eventName
+	palletName
+	indexInBlock
+	block {
+		id
+		height
+		timestamp
+		specVersion
+	}
+	extrinsic {
+		id
+	}
+	call {
+		id
+	}
+`);
+
+registerItemsConnectionFragment("ArchiveEventsConnection", "EventsConnection", "...ArchiveEvent");
+registerItemsConnectionFragment("ExplorerSquidEventsConnection", "EventsConnection", "...ExplorerSquidEvent");
+
 async function getArchiveEvent(network: string, filter: EventsFilter) {
 	const response = await fetchArchive<{events: ArchiveEvent[]}>(
 		network,
 		`query ($filter: EventWhereInput) {
 			events(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				name
-				indexInBlock
-				block {
-					id
-					height
-					timestamp
-					spec {
-						specVersion
-					}
-				}
-				extrinsic {
-					id
-				}
-				call {
-					id
-				}
-				args
+				...ArchiveEvent
 			}
 		}`,
 		{
@@ -155,22 +134,7 @@ async function getExplorerSquidEvent(network: string, filter: EventsFilter) {
 		network,
 		`query ($filter: EventWhereInput) {
 			events(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				eventName
-				palletName
-				indexInBlock
-				block {
-					id
-					height
-					timestamp
-					specVersion
-				}
-				extrinsic {
-					id
-				}
-				call {
-					id
-				}
+				...ExplorerSquidEvent
 			}
 		}`,
 		{
@@ -197,33 +161,7 @@ async function getArchiveEvents(
 		network,
 		`query ($first: Int!, $after: String, $filter: EventWhereInput, $order: [EventOrderByInput!]!) {
 			eventsConnection(orderBy: $order, where: $filter, first: $first, after: $after) {
-				edges {
-					node {
-						id
-						name
-						block {
-							id
-							height
-							timestamp
-							spec {
-								specVersion
-							}
-						}
-						extrinsic {
-							id
-						}
-						call {
-							id
-						}
-						args
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ArchiveEventsConnection
 				${fetchTotalCount ? "totalCount" : ""}
 			}
 		}`,
@@ -256,31 +194,7 @@ async function getExplorerSquidEvents(
 		network,
 		`query ($first: Int!, $after: String, $filter: EventWhereInput, $order: [EventOrderByInput!]!) {
 			eventsConnection(orderBy: $order, where: $filter, first: $first, after: $after) {
-				edges {
-					node {
-						id
-						eventName
-						palletName
-						block {
-							id
-							height
-							timestamp
-							specVersion
-						}
-						extrinsic {
-							id
-						}
-						call {
-							id
-						}
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidEventsConnection
 				${fetchTotalCount ? "totalCount" : ""}
 			}
 		}`,
@@ -307,14 +221,12 @@ async function getExplorerSquidEvents(
 async function getArchiveEventArgs(network: string, eventIds: string[]) {
 	const response = await fetchArchive<{events: {id: string, args: any}[]}>(
 		network,
-		`
-			query($ids: [String!]) {
-				events(where: { id_in: $ids }) {
-					id
-					args
-				}
+		`query($ids: [String!]) {
+			events(where: { id_in: $ids }) {
+				id
+				args
 			}
-		`,
+		}`,
 		{
 			ids: eventIds,
 		}
@@ -339,7 +251,7 @@ async function addEventArgs(network: string, event: Event|undefined) {
 	};
 }
 
-export async function addEventsArgs(network: string, items: ItemsResponse<Event>) {
+export async function addEventsArgs<C extends boolean = false>(network: string, items: ItemsResponse<Event, C>) {
 	const eventIds = items.data.map((event) => event.id);
 
 	const argsByEventId = await getArchiveEventArgs(network, eventIds);
@@ -367,7 +279,7 @@ export function simplifyEventId(id: string) {
 	return simplifyId(id, /\d{10}-\d{6}-[^-]{5}/, 2);
 }
 
-async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<Event> {
+export async function unifyArchiveEvent(event: ArchiveEvent, network: string): Promise<Event> {
 	const [palletName, eventName] = event.name.split(".") as [string, string];
 	const specVersion = event.block.spec.specVersion;
 
@@ -408,7 +320,7 @@ export async function unifyExplorerSquidEvent(event: ExplorerSquidEvent, network
 	};
 }
 
-function eventsFilterToArchiveFilter(filter?: EventsFilter) {
+export function eventsFilterToArchiveFilter(filter?: EventsFilter) {
 	if (!filter) {
 		return undefined;
 	}
@@ -455,8 +367,6 @@ function eventsFilterToArchiveFilter(filter?: EventsFilter) {
 				: filter.palletName
 		};
 	}
-
-	return filter;
 }
 
 export function eventsFilterToExplorerSquidFilter(filter?: EventsFilter) {
@@ -497,5 +407,14 @@ export function eventsFilterToExplorerSquidFilter(filter?: EventsFilter) {
 		};
 	}
 
-	return filter;
+	if ("palletName" in filter) {
+		return "eventName" in filter
+			? {
+				palletName_eq: filter.palletName,
+				eventName_eq: filter.eventName
+			}
+			: {
+				palletName_eq: filter.palletName
+			};
+	}
 }
diff --git a/src/services/extrinsicsService.ts b/src/services/extrinsicsService.ts
index a5979f59..1ec933e7 100644
--- a/src/services/extrinsicsService.ts
+++ b/src/services/extrinsicsService.ts
@@ -11,14 +11,13 @@ import { simplifyId } from "../utils/id";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { lowerFirst, upperFirst } from "../utils/string";
 
-import { fetchArchive, fetchExplorerSquid } from "./fetchService";
+import { fetchArchive, fetchExplorerSquid, registerItemFragment, registerItemsConnectionFragment } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 import { getCallRuntimeMetadata, getCallsRuntimeMetadata, getPalletsRuntimeMetadata } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
 
 export type ExtrinsicsFilter =
 	undefined
-	| { id: string; }
 	| { simplifiedId: string; }
 	| { hash: string; }
 	| { blockId: string; }
@@ -32,45 +31,6 @@ export async function getExtrinsic(network: string, filter: ExtrinsicsFilter) {
 	return getArchiveExtrinsic(network, filter);
 }
 
-export async function getExtrinsicsByName(
-	network: string,
-	name: string,
-	order: ExtrinsicsOrder = "id_DESC",
-	pagination: PaginationOptions,
-) {
-	const {pallet: palletName, call: callName} = await normalizeExtrinsicName(network, name);
-
-	const filter: ExtrinsicsFilter = callName
-		? { palletName, callName }
-		: { palletName };
-
-	if(hasSupport(network, "explorer-squid")) {
-		const counterFilter = callName
-			? `Extrinsics.${palletName}.${callName}`
-			: `Extrinsics.${palletName}`;
-
-		// use item counter to fetch total count quickly
-		const countResponse = await fetchExplorerSquid<{itemsCounterById: ItemsCounter|null}>(
-			network,
-			`query ($counterFilter: String!) {
-				itemsCounterById(id: $counterFilter) {
-					total
-				}
-			}`,
-			{
-				counterFilter,
-			}
-		);
-
-		const extrinsics = await getExplorerSquidExtrinsics(network, filter, order, pagination, false);
-		extrinsics.totalCount = countResponse.itemsCounterById?.total;
-
-		return extrinsics;
-	}
-
-	return getArchiveExtrinsics(network, filter, order, pagination, false);
-}
-
 export async function getExtrinsics(
 	network: string,
 	filter: ExtrinsicsFilter|undefined,
@@ -108,33 +68,63 @@ export async function normalizeExtrinsicName(network: string, name: string) {
 
 /*** PRIVATE ***/
 
+registerItemFragment("ArchiveExtrinsic", "Extrinsic", `
+	id
+	hash
+	call {
+		name
+		args
+	}
+	block {
+		id
+		hash
+		height
+		timestamp
+		spec {
+			specVersion
+		}
+	}
+	signature
+	indexInBlock
+	success
+	tip
+	fee
+	error
+	version
+`);
+
+registerItemFragment("ExplorerSquidExtrinsic", "Extrinsic", `
+	id
+	extrinsicHash
+	block {
+		id
+		hash
+		height
+		timestamp
+		specVersion
+	}
+	mainCall {
+		callName
+		palletName
+	}
+	indexInBlock
+	success
+	tip
+	fee
+	signerPublicKey
+	error
+	version
+`);
+
+registerItemsConnectionFragment("ArchiveExtrinsicsConnection", "ExtrinsicsConnection", "...ArchiveExtrinsic");
+registerItemsConnectionFragment("ExplorerSquidExtrinsicsConnection", "ExtrinsicsConnection", "...ExplorerSquidExtrinsic");
+
 async function getArchiveExtrinsic(network: string, filter?: ExtrinsicsFilter) {
 	const response = await fetchArchive<{extrinsics: ArchiveExtrinsic[]}>(
 		network,
 		`query ($filter: ExtrinsicWhereInput) {
 			extrinsics(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {
-				id
-				hash
-				call {
-					name
-					args
-				}
-				block {
-					id
-					hash
-					height
-					timestamp
-					spec {
-						specVersion
-					}
-				}
-				signature
-				indexInBlock
-				success
-				tip
-				fee
-				error
-				version
+				...ArchiveExtrinsic
 			}
 		}`,
 		{
@@ -158,38 +148,7 @@ async function getArchiveExtrinsics(
 		network,
 		`query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {
 			extrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						hash
-						call {
-							name
-							args
-						}
-						block {
-							id
-							hash
-							height
-							timestamp
-							spec {
-								specVersion
-							}
-						}
-						signature
-						indexInBlock
-						success
-						tip
-						fee
-						error
-						version
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ArchiveExtrinsicsConnection
 				${fetchTotalCount ? "totalCount" : ""}
 			}
 		}`,
@@ -222,36 +181,7 @@ async function getExplorerSquidExtrinsics(
 		network,
 		`query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {
 			extrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						extrinsicHash
-						block {
-							id
-							hash
-							height
-							timestamp
-							specVersion
-						}
-						mainCall {
-							callName
-							palletName
-						}
-						indexInBlock
-						success
-						tip
-						fee
-						signerPublicKey
-						error
-						version
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidExtrinsicsConnection
 				${fetchTotalCount ? "totalCount" : ""}
 			}
 		}`,
@@ -284,7 +214,7 @@ export function simplifyExtrinsicId(id: string) {
 	return simplifyId(id, /\d{10}-\d{6}-[^-]{5}/, 2);
 }
 
-async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Promise<Extrinsic> {
+export async function unifyArchiveExtrinsic(extrinsic: ArchiveExtrinsic, network: string): Promise<Extrinsic> {
 	const [palletName, callName] = extrinsic.call.name.split(".") as [string, string];
 	const specVersion = extrinsic.block.spec.specVersion;
 
@@ -340,7 +270,7 @@ export async function getExtrinsicMetadata(extrinsic: Omit<Extrinsic, "metadata"
 	};
 }
 
-function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
+export function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 	if (!filter) {
 		return undefined;
 	}
@@ -356,22 +286,17 @@ function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 		};
 	}
 
-	if ("blockId" in filter) {
+	if ("hash" in filter) {
 		return {
-			block: {
-				id_eq: filter.blockId
-			}
+			hash_eq: filter.hash
 		};
 	}
 
-	if ("signerAddress" in filter) {
-		const publicKey = decodeAddress(filter.signerAddress);
-
+	if ("blockId" in filter) {
 		return {
-			OR: [
-				{ signature_jsonContains: `{"address": "${publicKey}" }` },
-				{ signature_jsonContains: `{"address": { "value": "${publicKey}"} }` },
-			],
+			block: {
+				id_eq: filter.blockId
+			}
 		};
 	}
 
@@ -385,7 +310,16 @@ function extrinsicFilterToArchiveFilter(filter?: ExtrinsicsFilter) {
 		};
 	}
 
-	return filter;
+	if ("signerAddress" in filter) {
+		const publicKey = decodeAddress(filter.signerAddress);
+
+		return {
+			OR: [
+				{ signature_jsonContains: `{"address": "${publicKey}" }` },
+				{ signature_jsonContains: `{"address": { "value": "${publicKey}"} }` },
+			],
+		};
+	}
 }
 
 export function extrinsicFilterToExplorerSquidFilter(filter?: ExtrinsicsFilter) {
@@ -416,21 +350,24 @@ export function extrinsicFilterToExplorerSquidFilter(filter?: ExtrinsicsFilter)
 		};
 	}
 
-	if ("signerAddress" in filter) {
-		const publicKey = decodeAddress(filter.signerAddress);
-
+	if ("palletName" in filter) {
 		return {
-			signerPublicKey_eq: publicKey
+			mainCall: "callName" in filter
+				? {
+					palletName_eq: filter.palletName,
+					callName_eq: filter.callName
+				}
+				: {
+					palletName_eq: filter.palletName
+				}
 		};
 	}
 
-	if ("palletName" in filter) {
+	if ("signerAddress" in filter) {
+		const publicKey = decodeAddress(filter.signerAddress);
+
 		return {
-			mainCall: {
-				...filter
-			}
+			signerPublicKey_eq: publicKey
 		};
 	}
-
-	return filter;
 }
diff --git a/src/services/fetchService.ts b/src/services/fetchService.ts
index e11a9136..b7c909f0 100644
--- a/src/services/fetchService.ts
+++ b/src/services/fetchService.ts
@@ -1,6 +1,8 @@
 import { fetchGraphql } from "../utils/fetchGraphql";
 import { getArchive, getExplorerSquid, getStatsSquid, getMainSquid, getIdentitesSquid } from "./networksService";
 
+const graphqlFragments: Record<string, string> = {};
+
 export async function fetchArchive<T = any>(network: string, query: string, variables: object = {}) {
 	const archiveUrl = getArchive(network);
 
@@ -8,7 +10,7 @@ export async function fetchArchive<T = any>(network: string, query: string, vari
 		throw new Error(`Archive for network '${network}' not found`);
 	}
 
-	return fetchGraphql<T>(archiveUrl, query, variables);
+	return fetchGraphql<T>(archiveUrl, query, variables, graphqlFragments);
 }
 
 export function fetchExplorerSquid<T = any>(network: string, query: string, variables: object = {}) {
@@ -18,7 +20,7 @@ export function fetchExplorerSquid<T = any>(network: string, query: string, vari
 		throw new Error(`Explorer squid for network '${network}' not found`);
 	}
 
-	return fetchGraphql<T>(squidUrl, query, variables);
+	return fetchGraphql<T>(squidUrl, query, variables, graphqlFragments);
 }
 
 export function fetchMainSquid<T = any>(network: string, query: string, variables: object = {}) {
@@ -28,7 +30,7 @@ export function fetchMainSquid<T = any>(network: string, query: string, variable
 		throw new Error(`Main squid for network '${network}' not found`);
 	}
 
-	return fetchGraphql<T>(squidUrl, query, variables);
+	return fetchGraphql<T>(squidUrl, query, variables, graphqlFragments);
 }
 
 export function fetchIdentitiesSquid<T = any>(network: string, query: string, variables: object = {}) {
@@ -38,7 +40,7 @@ export function fetchIdentitiesSquid<T = any>(network: string, query: string, va
 		throw new Error(`Identities squid for network '${network}' not found`);
 	}
 
-	return fetchGraphql<T>(squidUrl, query, variables);
+	return fetchGraphql<T>(squidUrl, query, variables, graphqlFragments);
 }
 
 export function fetchStatsSquid<T = any>(network: string, query: string, variables: object = {}) {
@@ -48,5 +50,33 @@ export function fetchStatsSquid<T = any>(network: string, query: string, variabl
 		throw new Error(`Stats squid for network '${network}' not found`);
 	}
 
-	return fetchGraphql<T>(squidUrl, query, variables);
+	return fetchGraphql<T>(squidUrl, query, variables, graphqlFragments);
+}
+
+export function registerItemFragment(name: string, onType: string, body: string) {
+	registerGraphqlFragment(name, onType, body);
+}
+
+export function registerItemsConnectionFragment(name: string, onType: string, body: string) {
+	registerGraphqlFragment(name, onType, `
+		edges {
+			node {
+				${body}
+			}
+		}
+		pageInfo {
+			endCursor
+			hasNextPage
+			hasPreviousPage
+			startCursor
+		}
+	`);
+}
+
+export function registerGraphqlFragment(name: string, onType: string, body: string) {
+	graphqlFragments[name] = `
+		fragment ${name} on ${onType} {
+			${body}
+		}
+	`;
 }
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index c3d41f6b..87090df0 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -1,5 +1,8 @@
 import { isHex } from "@polkadot/util";
 
+import { ArchiveExtrinsic } from "../model/archive/archiveExtrinsic";
+import { ArchiveBlock } from "../model/archive/archiveBlock";
+
 import { ExplorerSquidBlock } from "../model/explorer-squid/explorerSquidBlock";
 import { ExplorerSquidEvent } from "../model/explorer-squid/explorerSquidEvent";
 import { ExplorerSquidExtrinsic } from "../model/explorer-squid/explorerSquidExtrinsic";
@@ -22,20 +25,15 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 import { emptyItemsResponse } from "../utils/itemsResponse";
 import { PickByType } from "../utils/types";
 
-import { BlocksFilter, blocksFilterToExplorerSquidFilter, unifyExplorerSquidBlock } from "./blocksService";
-import { EventsFilter, addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
-import { ExtrinsicsFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
-import { fetchExplorerSquid } from "./fetchService";
-import { getNetwork, getNetworks, hasSupport } from "./networksService";
-
+import { BlocksFilter, blocksFilterToArchiveFilter, blocksFilterToExplorerSquidFilter, unifyArchiveBlock, unifyExplorerSquidBlock } from "./blocksService";
+import { addEventsArgs, eventsFilterToExplorerSquidFilter, normalizeEventName, unifyExplorerSquidEvent } from "./eventsService";
+import { ExtrinsicsFilter, extrinsicFilterToArchiveFilter, extrinsicFilterToExplorerSquidFilter, normalizeExtrinsicName, unifyArchiveExtrinsic, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
+import { fetchArchive, fetchExplorerSquid } from "./fetchService";
+import { getNetwork, hasSupport } from "./networksService";
 
 export type SearchPaginationOptions = Record<keyof PickByType<NetworkSearchResult, ItemsResponse<any, true>>, PaginationOptions>;
 
 export async function search(query: string, networks: Network[], pagination: SearchPaginationOptions): Promise<SearchResult> {
-	if (networks.length === 0) {
-		networks = getNetworks();
-	}
-
 	const promiseResults = await Promise.allSettled(
 		networks.map(async (network) =>
 			searchNetwork(network, query, pagination, networks.length === 1)
@@ -136,6 +134,18 @@ export async function search(query: string, networks: Network[], pagination: Sea
 	};
 }
 
+export function getQueryType(network: Network, query: string) {
+	if (isHex(query)) {
+		return "hash";
+	} else if (query?.match(/^\d+$/)) {
+		return "blockHeight";
+	} else if (isEncodedAddress(network, query)) {
+		return "encodedAddress";
+	} else {
+		return "name";
+	}
+}
+
 /*** PRIVATE ***/
 
 type NetworkSearchResult = {
@@ -153,18 +163,27 @@ async function searchNetwork(
 	pagination: SearchPaginationOptions,
 	fetchAll = false
 ) {
-	if (!hasSupport(network.name, "explorer-squid")) {
-		return undefined; // TODO support all networks
-	}
+	switch (getQueryType(network, query)) {
+		case "hash":
+			if (hasSupport(network.name, "explorer-squid")) {
+				return searchNetworkByHash(network, query, pagination);
+			}
 
-	if (isHex(query)) {
-		return searchNetworkByHash(network, query, pagination);
-	} else if (query?.match(/^\d+$/)) {
-		return searchNetworkByBlockHeight(network, parseInt(query), pagination);
-	} else if (isEncodedAddress(network, query)) {
-		return searchNetworkByEncodedAddress(network, query, pagination);
-	} else {
-		return searchNetworkByName(network, query, pagination, fetchAll);
+			return searchNetworkArchiveByHash(network, query, pagination);
+		case "blockHeight":
+			if (hasSupport(network.name, "explorer-squid")) {
+				return searchNetworkByBlockHeight(network, parseInt(query), pagination);
+			}
+
+			return searchNetworkArchiveByBlockHeight(network, parseInt(query), pagination);
+		case "encodedAddress":
+			return searchNetworkByEncodedAddress(network, query, pagination);
+		default:
+			if (hasSupport(network.name, "explorer-squid")) {
+				return searchNetworkByName(network, query, pagination, fetchAll);
+			}
+
+			return undefined;
 	}
 }
 
@@ -194,56 +213,11 @@ async function searchNetworkByHash(
 			$extrinsicsFilter: ExtrinsicWhereInput,
 		) {
 			blocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {
-				edges {
-					node {
-						id
-						hash
-						height
-						timestamp
-						parentHash
-						validator
-						specVersion
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidBlocksConnection
 				totalCount
 			},
 			extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {
-				edges {
-					node {
-						id
-						extrinsicHash
-						block {
-							id
-							hash
-							height
-							timestamp
-							specVersion
-						}
-						mainCall {
-							callName
-							palletName
-						}
-						indexInBlock
-						success
-						tip
-						fee
-						signerPublicKey
-						error
-						version
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidExtrinsicsConnection
 				totalCount
 			}
 		}`,
@@ -283,6 +257,75 @@ async function searchNetworkByHash(
 	return result;
 }
 
+async function searchNetworkArchiveByHash(
+	network: Network,
+	hash: string,
+	pagination: SearchPaginationOptions,
+) {
+	const blocksFilter: BlocksFilter = {hash};
+	const extrinsicsFilter: ExtrinsicsFilter = {hash};
+
+	const blocksCursor = paginationToConnectionCursor(pagination.blocks);
+	const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
+
+	const response = await fetchArchive<{
+		blocks: ItemsConnection<ArchiveBlock, true>,
+		extrinsics: ItemsConnection<ArchiveExtrinsic, true>,
+	}>(
+		network.name,
+		`query (
+			$blocksFirst: Int!,
+			$blocksAfter: String,
+			$blocksFilter: BlockWhereInput,
+			$extrinsicsFirst: Int!,
+			$extrinsicsAfter: String,
+			$extrinsicsFilter: ExtrinsicWhereInput,
+		) {
+			blocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {
+				...ArchiveBlocksConnection
+				totalCount
+			},
+			extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {
+				...ArchiveExtrinsicsConnection
+				totalCount
+			}
+		}`,
+		{
+			blocksFirst: blocksCursor.first,
+			blocksAfter: blocksCursor.after,
+			blocksFilter: blocksFilterToArchiveFilter(blocksFilter),
+			extrinsicsFirst: extrinsicsCursor.first,
+			extrinsicsAfter: extrinsicsCursor.after,
+			extrinsicsFilter: extrinsicFilterToArchiveFilter(extrinsicsFilter),
+		}
+	);
+
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyArchiveBlock,
+		network.name
+	);
+
+	const extrinsics = await extractConnectionItems(
+		response.extrinsics,
+		pagination.extrinsics,
+		unifyArchiveExtrinsic,
+		network.name
+	);
+
+	const result: NetworkSearchResult = {
+		network,
+		accounts: emptyItemsResponse(0),
+		blocks,
+		extrinsics,
+		events: emptyItemsResponse(0),
+		totalCount: blocks.totalCount + extrinsics.totalCount
+	};
+
+	return result;
+}
+
 async function searchNetworkByBlockHeight(network: Network, height: number, pagination: SearchPaginationOptions) {
 	const blocksFilter: BlocksFilter = {height};
 
@@ -292,23 +335,7 @@ async function searchNetworkByBlockHeight(network: Network, height: number, pagi
 		network.name,
 		`query ($blocksFilter: BlockWhereInput) {
 			blocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {
-				edges {
-					node {
-						id
-						hash
-						height
-						timestamp
-						parentHash
-						validator
-						specVersion
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...ExplorerSquidBlocksConnection
 				totalCount
 			},
 		}`,
@@ -336,6 +363,43 @@ async function searchNetworkByBlockHeight(network: Network, height: number, pagi
 	return result;
 }
 
+async function searchNetworkArchiveByBlockHeight(network: Network, height: number, pagination: SearchPaginationOptions) {
+	const blocksFilter: BlocksFilter = {height};
+
+	const response = await fetchArchive<{
+		blocks: ItemsConnection<ArchiveBlock, true>,
+	}>(
+		network.name,
+		`query ($blocksFilter: BlockWhereInput) {
+			blocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {
+				...ArchiveBlocksConnection
+				totalCount
+			},
+		}`,
+		{
+			blocksFilter: blocksFilterToArchiveFilter(blocksFilter),
+		}
+	);
+
+	const blocks = await extractConnectionItems(
+		response.blocks,
+		pagination.blocks,
+		unifyArchiveBlock,
+		network.name
+	);
+
+	const result: NetworkSearchResult = {
+		network,
+		accounts: emptyItemsResponse(0),
+		blocks,
+		extrinsics: emptyItemsResponse(0),
+		events: emptyItemsResponse(0),
+		totalCount: blocks.totalCount
+	};
+
+	return result;
+}
+
 async function searchNetworkByEncodedAddress(network: Network, encodedAddress: string, pagination: SearchPaginationOptions) {
 	const result: NetworkSearchResult = {
 		network,
@@ -403,143 +467,78 @@ async function searchNetworkByName(
 		}
 	);
 
-	let extrinsicsFilter: ExtrinsicsFilter = {id: ""}; // default failing filter
-	let eventsFilter: EventsFilter = {id: ""}; // default failing filter
+	let extrinsics: ItemsResponse<Extrinsic, true> = emptyItemsResponse(countersResponse.extrinsicsByNameCounter?.total || 0);
+	let events: ItemsResponse<Event, true> = emptyItemsResponse(countersResponse.eventsByNameCounter?.total || 0);
 
 	if (fetchAll) {
-		if (countersResponse.extrinsicsByNameCounter?.total) {
-			extrinsicsFilter = extrinsicName.call
-				? { palletName: extrinsicName.pallet, callName: extrinsicName.call }
-				: { palletName: extrinsicName.pallet };
-		}
-
-		if (countersResponse.eventsByNameCounter?.total) {
-			eventsFilter = eventName.event
-				? { palletName: eventName.pallet, eventName: eventName.event }
-				: { palletName: eventName.pallet };
-		}
-	}
-
-	const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
-	const eventsCursor = paginationToConnectionCursor(pagination.events);
-
-	const response = await fetchExplorerSquid<{
-		extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
-		events: ItemsConnection<ExplorerSquidEvent>,
-	}>(
-		network.name,
-		`query (
-			$extrinsicsFirst: Int!,
-			$extrinsicsAfter: String,
-			$extrinsicsFilter: ExtrinsicWhereInput,
-			$eventsFirst: Int!,
-			$eventsAfter: String,
-			$eventsFilter: EventWhereInput,
-		) {
-			extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_DESC) {
-				edges {
-					node {
-						id
-						extrinsicHash
-						block {
-							id
-							hash
-							height
-							timestamp
-							specVersion
-						}
-						mainCall {
-							callName
-							palletName
-						}
-						indexInBlock
-						success
-						tip
-						fee
-						signerPublicKey
-						error
-						version
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
-			}
-			events: eventsConnection(first: $eventsFirst, after: $eventsAfter, where: $eventsFilter, orderBy: id_DESC) {
-				edges {
-					node {
-						id
-						eventName
-						palletName
-						block {
-							id
-							height
-							timestamp
-							specVersion
-						}
-						extrinsic {
-							id
-						}
-						call {
-							id
-						}
-					}
+		const extrinsicsFilter = extrinsicName.call
+			? { palletName: extrinsicName.pallet, callName: extrinsicName.call }
+			: { palletName: extrinsicName.pallet };
+		const eventsFilter = eventName.event
+			? { palletName: eventName.pallet, eventName: eventName.event }
+			: { palletName: eventName.pallet };
+
+		const extrinsicsCursor = paginationToConnectionCursor(pagination.extrinsics);
+		const eventsCursor = paginationToConnectionCursor(pagination.events);
+
+		const response = await fetchExplorerSquid<{
+			extrinsics: ItemsConnection<ExplorerSquidExtrinsic>,
+			events: ItemsConnection<ExplorerSquidEvent>,
+		}>(
+			network.name,
+			`query (
+				$extrinsicsFirst: Int!,
+				$extrinsicsAfter: String,
+				$extrinsicsFilter: ExtrinsicWhereInput,
+				$eventsFirst: Int!,
+				$eventsAfter: String,
+				$eventsFilter: EventWhereInput,
+			) {
+				extrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_DESC) {
+					...ExplorerSquidExtrinsicsConnection
 				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
+				events: eventsConnection(first: $eventsFirst, after: $eventsAfter, where: $eventsFilter, orderBy: id_DESC) {
+					...ExplorerSquidEventsConnection
 				}
+			}`,
+			{
+				extrinsicsFirst: extrinsicsCursor.first,
+				extrinsicsAfter: extrinsicsCursor.after,
+				extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
+				eventsFirst: eventsCursor.first,
+				eventsAfter: eventsCursor.after,
+				eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
 			}
-		}`,
-		{
-			extrinsicsFirst: extrinsicsCursor.first,
-			extrinsicsAfter: extrinsicsCursor.after,
-			extrinsicsFilter: extrinsicFilterToExplorerSquidFilter(extrinsicsFilter),
-			eventsFirst: eventsCursor.first,
-			eventsAfter: eventsCursor.after,
-			eventsFilter: eventsFilterToExplorerSquidFilter(eventsFilter),
+		);
 
-		}
-	);
-
-	const extrinsics = await extractConnectionItems(
-		response.extrinsics,
-		pagination.extrinsics,
-		unifyExplorerSquidExtrinsic,
-		network.name
-	);
+		response.extrinsics.totalCount = countersResponse.extrinsicsByNameCounter?.total || 0;
+		response.events.totalCount = countersResponse.eventsByNameCounter?.total || 0;
 
-	const events = await addEventsArgs(
-		network.name,
-		await extractConnectionItems(
-			response.events,
-			pagination.events,
-			unifyExplorerSquidEvent,
+		extrinsics = await extractConnectionItems(
+			response.extrinsics as ItemsConnection<ExplorerSquidExtrinsic, true>,
+			pagination.extrinsics,
+			unifyExplorerSquidExtrinsic,
 			network.name
-		)
-	);
-
-	const extrinsicsTotalCount = countersResponse.extrinsicsByNameCounter?.total || 0;
-	const eventsTotalCount = countersResponse.eventsByNameCounter?.total || 0;
+		);
+
+		events = await addEventsArgs(
+			network.name,
+			await extractConnectionItems(
+				response.events as ItemsConnection<ExplorerSquidEvent, true>,
+				pagination.events,
+				unifyExplorerSquidEvent,
+				network.name
+			)
+		);
+	}
 
 	const result: NetworkSearchResult = {
 		network,
 		accounts: emptyItemsResponse(0),
 		blocks: emptyItemsResponse(0),
-		extrinsics: {
-			...extrinsics,
-			totalCount: extrinsicsTotalCount
-		},
-		events: {
-			...events,
-			totalCount: eventsTotalCount
-		},
-		totalCount: extrinsicsTotalCount + eventsTotalCount
+		extrinsics,
+		events,
+		totalCount: extrinsics.totalCount + events.totalCount
 	};
 
 	return result;
diff --git a/src/services/transfersService.ts b/src/services/transfersService.ts
index aac73c6a..3c90e0e1 100644
--- a/src/services/transfersService.ts
+++ b/src/services/transfersService.ts
@@ -9,7 +9,7 @@ import { extractConnectionItems, paginationToConnectionCursor } from "../utils/i
 import { emptyItemsResponse } from "../utils/itemsResponse";
 import { rawAmountToDecimal } from "../utils/number";
 
-import { fetchArchive, fetchMainSquid } from "./fetchService";
+import { fetchArchive, fetchMainSquid, registerItemFragment, registerItemsConnectionFragment } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
 
 export type TransfersFilter =
@@ -32,6 +32,30 @@ export async function getTransfers(
 
 /*** PRIVATE ***/
 
+registerItemFragment("MainSquidTransfer", "Transfer", `
+	id
+	direction
+	account {
+		publicKey
+	}
+	transfer {
+		id
+		blockNumber
+		timestamp
+		extrinsicHash
+		to {
+			publicKey
+		}
+		from {
+			publicKey
+		}
+		amount
+		success
+	}
+`);
+
+registerItemsConnectionFragment("MainSquidTransfersConnection", "TransfersConnection", "...MainSquidTransfer");
+
 async function getMainSquidTransfers(
 	network: string,
 	filter: TransfersFilter | undefined,
@@ -44,35 +68,7 @@ async function getMainSquidTransfers(
 		network,
 		`query ($first: Int!, $after: String, $filter: TransferWhereInput, $order: [TransferOrderByInput!]!) {
 			transfersConnection(first: $first, after: $after, where: $filter, orderBy: $order) {
-				edges {
-					node {
-						id
-						transfer {
-							id
-							amount
-							blockNumber
-							success
-							timestamp
-							extrinsicHash
-							to {
-								publicKey
-							}
-							from {
-								publicKey
-							}
-						}
-						account {
-							publicKey
-						}
-						direction
-					}
-				}
-				pageInfo {
-					endCursor
-					hasNextPage
-					hasPreviousPage
-					startCursor
-				}
+				...MainSquidTransfersConnection
 				${(filter != undefined) ?  "totalCount" : ""}
 			}
 		}`,
diff --git a/src/utils/fetchGraphql.ts b/src/utils/fetchGraphql.ts
index d1213a3b..67302c63 100644
--- a/src/utils/fetchGraphql.ts
+++ b/src/utils/fetchGraphql.ts
@@ -1,10 +1,30 @@
 import { DataError, FetchError } from "./error";
+import { uniq } from "./uniq";
 
 export async function fetchGraphql<T = any>(
 	url: string,
 	query: string,
-	variables: object = {}
+	variables: object = {},
+	fragments: Record<string, string> = {}
 ): Promise<T> {
+	const usedFragments: Record<string, string> = {};
+
+	const queue = [query];
+	while (queue.length > 0) {
+		const gql = queue.pop()!;
+
+		const fragmentNames = gql
+			.match(/\.\.\.[^,\s]+/g)
+			?.map(it => it.slice(3))
+			.filter(it => !usedFragments[it]);
+
+		for (const fragmentName of fragmentNames || []) {
+			const fragment = fragments[fragmentName] || "";
+			usedFragments[fragmentName] = fragment;
+			queue.push(fragment);
+		}
+	}
+
 	const response = await fetch(url, {
 		method: "POST",
 
@@ -13,7 +33,7 @@ export async function fetchGraphql<T = any>(
 		},
 
 		body: JSON.stringify({
-			query,
+			query: `${query}\n${Object.values(usedFragments).join("\n")}`,
 			variables,
 		}),
 	});

From 84f0a03467c712247b029f47f115723f28fd1bbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 28 Nov 2023 18:46:07 +0100
Subject: [PATCH 20/21] search tests & tests refactoring to use fixtures,share
 code

---
 .github/workflows/test-and-deploy.yml         |   2 +-
 package-lock.json                             |  93 +-
 package.json                                  |   4 +-
 playwright.config.ts                          |   2 +-
 src/components/ItemsTable.tsx                 |   4 +-
 src/components/Time.tsx                       |  13 +-
 .../account/AccountBalancesTable.tsx          |   2 +-
 .../account/AccountIdentityInfo.tsx           |   2 +-
 .../HoldersTable.tsx}                         |  22 +-
 src/components/blocks/BlocksTable.tsx         |   2 +-
 src/components/calls/CallsTable.tsx           |   2 +-
 src/components/events/EventsTable.tsx         |   2 +-
 src/components/extrinsics/ExtrinsicsTable.tsx |   2 +-
 src/components/network/NetworkStats.tsx       |   2 +-
 .../network/NetworkTokenDistribution.tsx      |   2 +-
 .../search/AccountSearchResultsTable.tsx      |   1 +
 .../search/BlockSearchResultsTable.tsx        |   1 +
 .../search/EventSearchResultsTable.tsx        |   1 +
 .../search/ExtrinsicSearchResultsTable.tsx    |   1 +
 src/components/transfers/TransfersTable.tsx   |   2 +-
 src/networks.json                             |  20 +-
 src/screens/account.tsx                       |   8 +-
 src/screens/block.tsx                         |   6 +-
 src/screens/call.tsx                          |   6 +-
 src/screens/event.tsx                         |   4 +-
 src/screens/extrinsic.tsx                     |   6 +-
 src/screens/network.tsx                       |  12 +-
 src/screens/search.tsx                        |  14 +-
 src/services/searchService.ts                 |   2 +-
 src/utils/equal.ts                            |   3 -
 src/utils/object.ts                           |  34 +
 test/e2e/account.fixture.json                 | 121 ---
 test/e2e/account.spec.ts                      | 414 ++++-----
 test/e2e/block.spec.ts                        | 240 +++---
 test/e2e/call.spec.ts                         | 129 +--
 test/e2e/event.spec.ts                        |  87 +-
 test/e2e/extrinsic.spec.ts                    | 189 ++---
 test/e2e/fixtures/account-balances-data.json  |  93 ++
 .../fixtures/account-balances-request.json    | 140 +++
 test/e2e/fixtures/account-calls-data.json     |  56 ++
 test/e2e/fixtures/account-calls-request.json  | 506 +++++++++++
 .../e2e/fixtures/account-extrinsics-data.json |  56 ++
 .../fixtures/account-extrinsics-request.json  | 586 +++++++++++++
 test/e2e/fixtures/account-identity-data.json  |   9 +
 test/e2e/fixtures/account-info-data.json      |  25 +
 test/e2e/fixtures/account-info-request.json   |  30 +
 test/e2e/fixtures/account-portfolio-data.json |   6 +
 test/e2e/fixtures/account-transfers-data.json |  86 ++
 .../fixtures/account-transfers-request.json   | 572 +++++++++++++
 test/e2e/fixtures/block-calls-data.json       |  48 ++
 test/e2e/fixtures/block-calls-request.json    | 179 ++++
 test/e2e/fixtures/block-events-data.json      |  66 ++
 test/e2e/fixtures/block-events-request.json   | 467 ++++++++++
 test/e2e/fixtures/block-extrinsics-data.json  |  26 +
 .../fixtures/block-extrinsics-request.json    | 135 +++
 test/e2e/fixtures/block-info-data.json        |  41 +
 test/e2e/fixtures/block-info-request.json     |  34 +
 test/e2e/fixtures/call-events-data.json       |  56 ++
 test/e2e/fixtures/call-events-request.json    | 239 ++++++
 test/e2e/fixtures/call-info-data.json         |  49 ++
 test/e2e/fixtures/call-info-request.json      | 112 +++
 test/e2e/fixtures/event-info-data.json        |  45 +
 test/e2e/fixtures/event-info-request.json     |  74 ++
 test/e2e/fixtures/extrinsic-calls-data.json   |  30 +
 .../e2e/fixtures/extrinsic-calls-request.json | 119 +++
 test/e2e/fixtures/extrinsic-events-data.json  |  56 ++
 .../fixtures/extrinsic-events-request.json    | 336 ++++++++
 test/e2e/fixtures/extrinsic-info-data.json    |  57 ++
 test/e2e/fixtures/extrinsic-info-request.json | 105 +++
 test/e2e/fixtures/network-blocks-data.json    |  64 ++
 test/e2e/fixtures/network-blocks-request.json | 143 ++++
 .../e2e/fixtures/network-extrinsics-data.json |  64 ++
 .../fixtures/network-extrinsics-request.json  | 273 ++++++
 test/e2e/fixtures/network-holders-data.json   |  74 ++
 .../e2e/fixtures/network-holders-request.json | 123 +++
 test/e2e/fixtures/network-info-data.json      |  12 +
 test/e2e/fixtures/network-info-request.json   |  37 +
 test/e2e/fixtures/network-transfers-data.json |  84 ++
 .../fixtures/network-transfers-request.json   | 263 ++++++
 ...account-encoded-address-accounts-data.json |  13 +
 ...e-by-account-public-key-accounts-data.json |  17 +
 ...search-multiple-by-block-hash-request.json | 158 ++++
 ...-multiple-by-block-height-blocks-data.json |  27 +
 .../search-multiple-by-block-height-data.json |   3 +
 ...arch-multiple-by-block-height-request.json | 131 +++
 ...ple-by-extrinsic-hash-extrinsics-data.json |  13 +
 ...ch-multiple-by-extrinsic-hash-request.json | 797 ++++++++++++++++++
 .../search-multiple-by-name-events-data.json  |  17 +
 ...arch-multiple-by-name-extrinsics-data.json |  17 +
 .../search-multiple-by-name-request.json      |  80 ++
 ...search-multiple-by-pallet-events-data.json |  17 +
 ...ch-multiple-by-pallet-extrinsics-data.json |  17 +
 .../search-multiple-by-pallet-request.json    |  80 ++
 .../search-single-by-block-hash-request.json  |  62 ++
 .../search-single-by-block-height-data.json   |   3 +
 ...search-single-by-block-height-request.json |  45 +
 ...gle-by-extrinsic-hash-extrinsics-data.json |  75 ++
 ...arch-single-by-extrinsic-hash-request.json | 364 ++++++++
 .../search-single-by-name-events-data.json    |  75 ++
 ...search-single-by-name-extrinsics-data.json |  75 ++
 .../search-single-by-name-request.json        | 632 ++++++++++++++
 .../search-single-by-pallet-events-data.json  |  75 ++
 ...arch-single-by-pallet-extrinsics-data.json |  75 ++
 .../search-single-by-pallet-request.json      | 622 ++++++++++++++
 test/e2e/fixtures/usd-rates-request.json      |  74 ++
 test/e2e/home.spec.ts                         |  18 +-
 test/e2e/network.fixture.json                 |  22 -
 test/e2e/network.spec.ts                      | 272 +++---
 test/e2e/notFound.spec.ts                     |   3 +-
 test/e2e/search.spec.ts                       | 776 +++++++++++++++++
 test/e2e/searchResults.spec.ts                | 291 -------
 test/e2e/templates/model.ts                   |  13 +
 test/e2e/templates/testItemError.ts           |  47 ++
 test/e2e/templates/testItemInfo.ts            |  27 +
 test/e2e/templates/testItemNotFound.ts        |  38 +
 test/e2e/templates/testRedirect.ts            |  10 +
 test/e2e/templates/testRelatedItems.ts        |  48 ++
 test/e2e/templates/testRelatedItemsError.ts   |  56 ++
 test/e2e/templates/utils.ts                   |  71 ++
 test/fixtures/takeScreenshotFixture.ts        |  24 +
 test/matchers/toHaveTableData.ts              |  50 ++
 test/test.ts                                  |  16 +
 test/utils/addAttachment.ts                   |  39 +
 test/utils/editJsonFile.ts                    |   9 +
 test/utils/getTableData.ts                    |  23 +
 test/utils/getTestFixturesDir.ts              |   7 +
 test/utils/getTestSpecFile.ts                 |   9 +
 test/utils/hideSelectors.ts                   |  11 +
 test/utils/matchSquidRequest.ts               |  37 +
 test/utils/mockRequest.ts                     |  13 -
 .../{screenshot.ts => takeScreenshot.ts}      |  32 +-
 test/utils/test.ts                            |  29 -
 test/utils/upperFirst.ts                      |   3 +
 test/utils/useDataFixture.ts                  |  53 ++
 test/utils/useRequestFixture.ts               |  95 +++
 135 files changed, 11370 insertions(+), 1369 deletions(-)
 rename src/components/{balances/BalancesTable.tsx => account/HoldersTable.tsx} (82%)
 delete mode 100644 src/utils/equal.ts
 create mode 100644 src/utils/object.ts
 delete mode 100644 test/e2e/account.fixture.json
 create mode 100644 test/e2e/fixtures/account-balances-data.json
 create mode 100644 test/e2e/fixtures/account-balances-request.json
 create mode 100644 test/e2e/fixtures/account-calls-data.json
 create mode 100644 test/e2e/fixtures/account-calls-request.json
 create mode 100644 test/e2e/fixtures/account-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/account-extrinsics-request.json
 create mode 100644 test/e2e/fixtures/account-identity-data.json
 create mode 100644 test/e2e/fixtures/account-info-data.json
 create mode 100644 test/e2e/fixtures/account-info-request.json
 create mode 100644 test/e2e/fixtures/account-portfolio-data.json
 create mode 100644 test/e2e/fixtures/account-transfers-data.json
 create mode 100644 test/e2e/fixtures/account-transfers-request.json
 create mode 100644 test/e2e/fixtures/block-calls-data.json
 create mode 100644 test/e2e/fixtures/block-calls-request.json
 create mode 100644 test/e2e/fixtures/block-events-data.json
 create mode 100644 test/e2e/fixtures/block-events-request.json
 create mode 100644 test/e2e/fixtures/block-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/block-extrinsics-request.json
 create mode 100644 test/e2e/fixtures/block-info-data.json
 create mode 100644 test/e2e/fixtures/block-info-request.json
 create mode 100644 test/e2e/fixtures/call-events-data.json
 create mode 100644 test/e2e/fixtures/call-events-request.json
 create mode 100644 test/e2e/fixtures/call-info-data.json
 create mode 100644 test/e2e/fixtures/call-info-request.json
 create mode 100644 test/e2e/fixtures/event-info-data.json
 create mode 100644 test/e2e/fixtures/event-info-request.json
 create mode 100644 test/e2e/fixtures/extrinsic-calls-data.json
 create mode 100644 test/e2e/fixtures/extrinsic-calls-request.json
 create mode 100644 test/e2e/fixtures/extrinsic-events-data.json
 create mode 100644 test/e2e/fixtures/extrinsic-events-request.json
 create mode 100644 test/e2e/fixtures/extrinsic-info-data.json
 create mode 100644 test/e2e/fixtures/extrinsic-info-request.json
 create mode 100644 test/e2e/fixtures/network-blocks-data.json
 create mode 100644 test/e2e/fixtures/network-blocks-request.json
 create mode 100644 test/e2e/fixtures/network-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/network-extrinsics-request.json
 create mode 100644 test/e2e/fixtures/network-holders-data.json
 create mode 100644 test/e2e/fixtures/network-holders-request.json
 create mode 100644 test/e2e/fixtures/network-info-data.json
 create mode 100644 test/e2e/fixtures/network-info-request.json
 create mode 100644 test/e2e/fixtures/network-transfers-data.json
 create mode 100644 test/e2e/fixtures/network-transfers-request.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-account-encoded-address-accounts-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-account-public-key-accounts-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-block-hash-request.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-block-height-blocks-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-block-height-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-block-height-request.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-extrinsic-hash-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-extrinsic-hash-request.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-name-events-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-name-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-name-request.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-pallet-events-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-pallet-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-multiple-by-pallet-request.json
 create mode 100644 test/e2e/fixtures/search-single-by-block-hash-request.json
 create mode 100644 test/e2e/fixtures/search-single-by-block-height-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-block-height-request.json
 create mode 100644 test/e2e/fixtures/search-single-by-extrinsic-hash-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-extrinsic-hash-request.json
 create mode 100644 test/e2e/fixtures/search-single-by-name-events-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-name-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-name-request.json
 create mode 100644 test/e2e/fixtures/search-single-by-pallet-events-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-pallet-extrinsics-data.json
 create mode 100644 test/e2e/fixtures/search-single-by-pallet-request.json
 create mode 100644 test/e2e/fixtures/usd-rates-request.json
 delete mode 100644 test/e2e/network.fixture.json
 create mode 100644 test/e2e/search.spec.ts
 delete mode 100644 test/e2e/searchResults.spec.ts
 create mode 100644 test/e2e/templates/model.ts
 create mode 100644 test/e2e/templates/testItemError.ts
 create mode 100644 test/e2e/templates/testItemInfo.ts
 create mode 100644 test/e2e/templates/testItemNotFound.ts
 create mode 100644 test/e2e/templates/testRedirect.ts
 create mode 100644 test/e2e/templates/testRelatedItems.ts
 create mode 100644 test/e2e/templates/testRelatedItemsError.ts
 create mode 100644 test/e2e/templates/utils.ts
 create mode 100644 test/fixtures/takeScreenshotFixture.ts
 create mode 100644 test/matchers/toHaveTableData.ts
 create mode 100644 test/test.ts
 create mode 100644 test/utils/addAttachment.ts
 create mode 100644 test/utils/editJsonFile.ts
 create mode 100644 test/utils/getTableData.ts
 create mode 100644 test/utils/getTestFixturesDir.ts
 create mode 100644 test/utils/getTestSpecFile.ts
 create mode 100644 test/utils/hideSelectors.ts
 create mode 100644 test/utils/matchSquidRequest.ts
 delete mode 100644 test/utils/mockRequest.ts
 rename test/utils/{screenshot.ts => takeScreenshot.ts} (59%)
 delete mode 100644 test/utils/test.ts
 create mode 100644 test/utils/upperFirst.ts
 create mode 100644 test/utils/useDataFixture.ts
 create mode 100644 test/utils/useRequestFixture.ts

diff --git a/.github/workflows/test-and-deploy.yml b/.github/workflows/test-and-deploy.yml
index ab9921a8..9305c58d 100644
--- a/.github/workflows/test-and-deploy.yml
+++ b/.github/workflows/test-and-deploy.yml
@@ -30,7 +30,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.37.0-focal
+      image: mcr.microsoft.com/playwright:v1.40.0-focal
     strategy:
       fail-fast: false
       matrix:
diff --git a/package-lock.json b/package-lock.json
index cda509d2..efdd1e15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,11 +46,12 @@
       "devDependencies": {
         "@argos-ci/cli": "^0.4.4",
         "@emotion/eslint-plugin": "^11.10.0",
-        "@playwright/test": "^1.37.0",
+        "@playwright/test": "^1.40.0",
         "@polkadot/api": "^10.1.4",
         "@polkadot/apps-config": "^0.124.1",
         "@subsquid/archive-registry": "^2.1.9",
         "@subsquid/ss58": "^0.1.4",
+        "@types/pluralize": "^0.0.33",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",
         "cli-table3": "^0.6.3",
@@ -58,6 +59,7 @@
         "cross-env": "^7.0.3",
         "eslint": "^8.36.0",
         "eslint-plugin-react": "^7.32.2",
+        "pluralize": "^8.0.0",
         "serve": "^14.2.0",
         "ts-node": "^10.9.1"
       }
@@ -4594,22 +4596,18 @@
       "dev": true
     },
     "node_modules/@playwright/test": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz",
-      "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
+      "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
       "dev": true,
       "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.37.0"
+        "playwright": "1.40.0"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
       }
     },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
@@ -10092,6 +10090,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/pluralize": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.33.tgz",
+      "integrity": "sha512-JOqsl+ZoCpP4e8TDke9W79FDcSgPAR0l6pixx2JHkhnRjvShyYiAYw2LVsnA7K08Y6DeOnaU6ujmENO4os/cYg==",
+      "dev": true
+    },
     "node_modules/@types/prettier": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.3.tgz",
@@ -21155,10 +21159,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
+      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.40.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/playwright-core": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz",
-      "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
+      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -21167,6 +21189,15 @@
         "node": ">=16"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/pnglib": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/pnglib/-/pnglib-0.0.1.tgz",
@@ -30246,14 +30277,12 @@
       "dev": true
     },
     "@playwright/test": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz",
-      "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.0.tgz",
+      "integrity": "sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==",
       "dev": true,
       "requires": {
-        "@types/node": "*",
-        "fsevents": "2.3.2",
-        "playwright-core": "1.37.0"
+        "playwright": "1.40.0"
       }
     },
     "@pmmmwh/react-refresh-webpack-plugin": {
@@ -34347,6 +34376,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/pluralize": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.33.tgz",
+      "integrity": "sha512-JOqsl+ZoCpP4e8TDke9W79FDcSgPAR0l6pixx2JHkhnRjvShyYiAYw2LVsnA7K08Y6DeOnaU6ujmENO4os/cYg==",
+      "dev": true
+    },
     "@types/prettier": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.3.tgz",
@@ -42377,10 +42412,26 @@
         }
       }
     },
+    "playwright": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz",
+      "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.40.0"
+      }
+    },
     "playwright-core": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz",
-      "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
+      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+      "dev": true
+    },
+    "pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
       "dev": true
     },
     "pnglib": {
diff --git a/package.json b/package.json
index 96998054..b7a6741f 100644
--- a/package.json
+++ b/package.json
@@ -73,11 +73,12 @@
   "devDependencies": {
     "@argos-ci/cli": "^0.4.4",
     "@emotion/eslint-plugin": "^11.10.0",
-    "@playwright/test": "^1.37.0",
+    "@playwright/test": "^1.40.0",
     "@polkadot/api": "^10.1.4",
     "@polkadot/apps-config": "^0.124.1",
     "@subsquid/archive-registry": "^2.1.9",
     "@subsquid/ss58": "^0.1.4",
+    "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
     "cli-table3": "^0.6.3",
@@ -85,6 +86,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.36.0",
     "eslint-plugin-react": "^7.32.2",
+    "pluralize": "^8.0.0",
     "serve": "^14.2.0",
     "ts-node": "^10.9.1"
   }
diff --git a/playwright.config.ts b/playwright.config.ts
index 7e2f290e..ba46389b 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -13,7 +13,7 @@ const config: Config = {
 	outputDir: "./test/results",
 	screenshotsDir: "./test/screenshots",
 	/* Maximum time one test can run for. */
-	timeout: 60 * 1000,
+	timeout: 30 * 1000,
 	expect: {
 		/**
      * Maximum time expect() should wait for the condition to be met.
diff --git a/src/components/ItemsTable.tsx b/src/components/ItemsTable.tsx
index 3fd81cff..5eaa69cc 100644
--- a/src/components/ItemsTable.tsx
+++ b/src/components/ItemsTable.tsx
@@ -100,6 +100,7 @@ export type ItemsTableProps<T extends ItemsTableItem, S = any, A extends any[] =
 	errorMessage?: string;
 	sort?: SortOrder<any>;
 	pageInfo?: PageInfo;
+	tableProps?: HTMLAttributes<HTMLTableElement>;
 	onPageChange?: (page: number) => void;
 };
 
@@ -115,6 +116,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		errorMessage = "Unexpected error occured while fetching items",
 		sort,
 		pageInfo,
+		tableProps = {},
 		onPageChange,
 		...restProps
 	} = props;
@@ -140,7 +142,7 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 	return (
 		<div {...restProps} data-class="table">
 			<TableContainer css={containerStyle}>
-				<Table css={tableStyle}>
+				<Table {...tableProps} css={tableStyle}>
 					<colgroup>
 						{Children.map(children, (child) => child && <col css={child.props.colCss} />)}
 					</colgroup>
diff --git a/src/components/Time.tsx b/src/components/Time.tsx
index e49f3a1d..d40d1aec 100644
--- a/src/components/Time.tsx
+++ b/src/components/Time.tsx
@@ -53,7 +53,18 @@ export const Time = (props: TimeProps) => {
 		}
 	}, [time, fromNow]);
 
-	const timeElement = <span data-test="time">{fromNow ? fromNowFormatted : formatted}</span>;
+	const timeElement = (
+		<span
+			data-test="time"
+			data-time-format={
+				fromNow ? "fromNow"
+					: utc ? "utc"
+						: formatProp
+			}
+		>
+			{fromNow ? fromNowFormatted : formatted}
+		</span>
+	);
 
 	if (!tooltip) {
 		return timeElement;
diff --git a/src/components/account/AccountBalancesTable.tsx b/src/components/account/AccountBalancesTable.tsx
index d7a9c49b..6123ca27 100644
--- a/src/components/account/AccountBalancesTable.tsx
+++ b/src/components/account/AccountBalancesTable.tsx
@@ -122,7 +122,7 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 				pageInfo={pageInfo}
 				onPageChange={onPageChange}
 				sort={sort}
-				data-test="account-balances-table"
+				data-test="balances-items"
 			>
 				<AccountBalancesTableAttribute
 					label="Network"
diff --git a/src/components/account/AccountIdentityInfo.tsx b/src/components/account/AccountIdentityInfo.tsx
index 1caaa0fb..8d669541 100644
--- a/src/components/account/AccountIdentityInfo.tsx
+++ b/src/components/account/AccountIdentityInfo.tsx
@@ -51,7 +51,7 @@ export const AccountIdentityInfo = (props: AccountIdentityInfoProps) => {
 	}
 
 	return (
-		<div css={identityItemsStyle} {...divProps}>
+		<div css={identityItemsStyle} {...divProps} data-test="account-identity-info">
 			{identity.web &&
 				<Tooltip
 					arrow
diff --git a/src/components/balances/BalancesTable.tsx b/src/components/account/HoldersTable.tsx
similarity index 82%
rename from src/components/balances/BalancesTable.tsx
rename to src/components/account/HoldersTable.tsx
index dd0f09ae..9202b56f 100644
--- a/src/components/balances/BalancesTable.tsx
+++ b/src/components/account/HoldersTable.tsx
@@ -5,22 +5,22 @@ import { Resource } from "../../model/resource";
 import { UsdRates } from "../../model/usdRates";
 import { decodeAddress } from "../../utils/address";
 
-import { AccountAddress } from "../account/AccountAddress";
+import { AccountAddress } from "./AccountAddress";
 
 import { Currency } from "../Currency";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Link } from "../Link";
 
-export type BalancesTableProps = {
+export type HoldersTableProps = {
 	network: Network;
 	balances: PaginatedResource<Balance>;
 	usdRates: Resource<UsdRates>;
 	onPageChange?: (page: number) => void;
 };
 
-const BalancesItemsTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates|undefined]>;
+const HoldersTableAttribute = ItemsTableAttribute<Balance, never, [UsdRates|undefined]>;
 
-function BalancesTable(props: BalancesTableProps) {
+function HoldersTable(props: HoldersTableProps) {
 	const { network, balances, usdRates, onPageChange } = props;
 
 	return (
@@ -33,9 +33,9 @@ function BalancesTable(props: BalancesTableProps) {
 			error={balances.error}
 			pageInfo={balances.pageInfo}
 			onPageChange={onPageChange}
-			data-test="balances-table"
+			data-test="holders-items"
 		>
-			<BalancesItemsTableAttribute
+			<HoldersTableAttribute
 				label="Account"
 				render={(balance) =>
 					<AccountAddress
@@ -46,7 +46,7 @@ function BalancesTable(props: BalancesTableProps) {
 					/>}
 			/>
 
-			<BalancesItemsTableAttribute
+			<HoldersTableAttribute
 				label="Total"
 				render={(balance, usdRates) =>
 					<Currency
@@ -60,7 +60,7 @@ function BalancesTable(props: BalancesTableProps) {
 				}
 			/>
 
-			<BalancesItemsTableAttribute
+			<HoldersTableAttribute
 				label="Free"
 				render={(balance, usdRates) =>
 					<Currency
@@ -74,7 +74,7 @@ function BalancesTable(props: BalancesTableProps) {
 				}
 			/>
 
-			<BalancesItemsTableAttribute
+			<HoldersTableAttribute
 				label="Reserved"
 				render={(balance, usdRates) =>
 					<Currency
@@ -88,7 +88,7 @@ function BalancesTable(props: BalancesTableProps) {
 				}
 			/>
 
-			<BalancesItemsTableAttribute
+			<HoldersTableAttribute
 				label="Last update"
 				render={(balance) =>
 					<Link to={`/${network.name}/search?query=${balance.updatedAtBlock}`}>
@@ -100,4 +100,4 @@ function BalancesTable(props: BalancesTableProps) {
 	);
 }
 
-export default BalancesTable;
+export default HoldersTable;
diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
index 82a88521..1de9068b 100644
--- a/src/components/blocks/BlocksTable.tsx
+++ b/src/components/blocks/BlocksTable.tsx
@@ -37,7 +37,7 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			error={blocks.error}
 			pageInfo={blocks.pageInfo}
 			onPageChange={onPageChange}
-			data-test="blocks-table"
+			data-test="blocks-items"
 		>
 			<BlocksTableAttribute
 				label="Height"
diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
index 57891299..edaa8eb4 100644
--- a/src/components/calls/CallsTable.tsx
+++ b/src/components/calls/CallsTable.tsx
@@ -31,7 +31,7 @@ export const CallsTable = (props: CallsTableProps) => {
 			error={calls.error}
 			pageInfo={calls.pageInfo}
 			onPageChange={onPageChange}
-			data-test="calls-table"
+			data-test="calls-items"
 		>
 			<CallsTableAttribute
 				label="ID"
diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
index 752d8870..201f17f7 100644
--- a/src/components/events/EventsTable.tsx
+++ b/src/components/events/EventsTable.tsx
@@ -38,7 +38,7 @@ function EventsTable(props: EventsTableProps) {
 			error={events.error}
 			pageInfo={events.pageInfo}
 			onPageChange={onPageChange}
-			data-test="events-table"
+			data-test="events-items"
 		>
 			<EventsItemsTableAttribute
 				label="ID"
diff --git a/src/components/extrinsics/ExtrinsicsTable.tsx b/src/components/extrinsics/ExtrinsicsTable.tsx
index 488c8675..a995ea67 100644
--- a/src/components/extrinsics/ExtrinsicsTable.tsx
+++ b/src/components/extrinsics/ExtrinsicsTable.tsx
@@ -37,7 +37,7 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 			error={extrinsics.error}
 			pageInfo={extrinsics.pageInfo}
 			onPageChange={onPageChange}
-			data-test="extrinsics-table"
+			data-test="extrinsics-items"
 		>
 			<ExtrinsicsTableAttribute
 				label="ID"
diff --git a/src/components/network/NetworkStats.tsx b/src/components/network/NetworkStats.tsx
index 8b4a9496..42c084cb 100644
--- a/src/components/network/NetworkStats.tsx
+++ b/src/components/network/NetworkStats.tsx
@@ -110,7 +110,7 @@ export const NetworkStats = (props: NetworkInfoTableProps) => {
 	}
 
 	return (
-		<div css={statsLayoutStyle}>
+		<div css={statsLayoutStyle} data-test="network-stats">
 			<StatItem title="Finalized blocks" value={stats.data.chainFinalizedBlocks} icon={Block} />
 			<StatItem title="Signed extrinsics" value={stats.data.chainSignedExtrinsics} icon={Signed} />
 			<StatItem title="Staking inflation" value={`${stats.data.stakingInflationRatio.toFixed(1)}%`} icon={Inflation} />
diff --git a/src/components/network/NetworkTokenDistribution.tsx b/src/components/network/NetworkTokenDistribution.tsx
index 50f661fa..e31094c8 100644
--- a/src/components/network/NetworkTokenDistribution.tsx
+++ b/src/components/network/NetworkTokenDistribution.tsx
@@ -76,7 +76,7 @@ export const NetworkTokenDistribution = (props: NetworkTokenDistributionProps) =
 	return (
 		<div>
 			<div>
-				<div css={valueStyle}>
+				<div css={valueStyle} data-test="network-total-issuance">
 					<div css={valueTypeStyle}>Total issuance</div>
 					<div>{formatNumber(stats.data.balancesTotalIssuance, {compact: true})}</div>
 				</div>
diff --git a/src/components/search/AccountSearchResultsTable.tsx b/src/components/search/AccountSearchResultsTable.tsx
index ec1f03a8..ce927e18 100644
--- a/src/components/search/AccountSearchResultsTable.tsx
+++ b/src/components/search/AccountSearchResultsTable.tsx
@@ -24,6 +24,7 @@ export const AccountSearchResultsTable = (props: AccountSearchResultsTable) => {
 			notFound={accounts.notFound}
 			error={accounts.error}
 			itemsPlural="accounts"
+			data-test="accounts-items"
 			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Account>
diff --git a/src/components/search/BlockSearchResultsTable.tsx b/src/components/search/BlockSearchResultsTable.tsx
index 2939551c..a5d702c9 100644
--- a/src/components/search/BlockSearchResultsTable.tsx
+++ b/src/components/search/BlockSearchResultsTable.tsx
@@ -25,6 +25,7 @@ export const BlockSearchResultsTable = (props: BlockSearchResultsTable) => {
 			notFound={blocks.notFound}
 			error={blocks.error}
 			itemsPlural="blocks"
+			data-test="blocks-items"
 			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Block>
diff --git a/src/components/search/EventSearchResultsTable.tsx b/src/components/search/EventSearchResultsTable.tsx
index fc41ebcd..ba17e5fd 100644
--- a/src/components/search/EventSearchResultsTable.tsx
+++ b/src/components/search/EventSearchResultsTable.tsx
@@ -32,6 +32,7 @@ export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
 			notFound={events.notFound}
 			error={events.error}
 			itemsPlural="events"
+			data-test="events-items"
 			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Event>
diff --git a/src/components/search/ExtrinsicSearchResultsTable.tsx b/src/components/search/ExtrinsicSearchResultsTable.tsx
index 742eaeed..fc8e5e87 100644
--- a/src/components/search/ExtrinsicSearchResultsTable.tsx
+++ b/src/components/search/ExtrinsicSearchResultsTable.tsx
@@ -27,6 +27,7 @@ export const ExtrinsicSearchResultsTable = (props: ExtrinsicSearchResultsTable)
 			notFound={extrinsics.notFound}
 			error={extrinsics.error}
 			itemsPlural="extrinsics"
+			data-test="extrinsics-items"
 			{...tableProps}
 		>
 			<SearchResultsTableItemAttribute<Extrinsic>
diff --git a/src/components/transfers/TransfersTable.tsx b/src/components/transfers/TransfersTable.tsx
index 7d3d717a..50395c49 100644
--- a/src/components/transfers/TransfersTable.tsx
+++ b/src/components/transfers/TransfersTable.tsx
@@ -42,7 +42,7 @@ function TransfersTable(props: TransfersTableProps) {
 			error={transfers.error}
 			pageInfo={transfers.pageInfo}
 			onPageChange={onPageChange}
-			data-test="transfers-table"
+			data-test="transfers-items"
 		>
 			<TransfersTableAttribute
 				label="Event"
diff --git a/src/networks.json b/src/networks.json
index b40835c0..dbb81102 100644
--- a/src/networks.json
+++ b/src/networks.json
@@ -97,8 +97,7 @@
         "symbol": "BNC",
         "squids": {
             "archive": "https://bifrost.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-bifrost/graphql",
-            "main": "https://squid.subsquid.io/gs-main-bifrost/graphql"
+            "explorer": "https://squid.subsquid.io/gs-explorer-bifrost/graphql"
         },
         "coinGeckoId": "bifrost-native-coin"
     },
@@ -130,8 +129,7 @@
         "decimals": 9,
         "symbol": "EQ",
         "squids": {
-            "archive": "https://equilibrium.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-equilibrium/graphql"
+            "archive": "https://equilibrium.explorer.subsquid.io/graphql"
         }
     },
     {
@@ -180,8 +178,7 @@
         "symbol": "INTR",
         "squids": {
             "archive": "https://interlay.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-interlay/graphql",
-            "main": "https://squid.subsquid.io/gs-main-interlay/graphql"
+            "explorer": "https://squid.subsquid.io/gs-explorer-interlay/graphql"
         },
         "coinGeckoId": "interlay"
     },
@@ -189,7 +186,6 @@
         "name": "invarch-tinkernet",
         "displayName": "InvArch Tinkernet",
         "icon": "/assets/network-icons/invarch-tinkernet.svg",
-        "color": "#161616",
         "website": "https://invarch.network/tinkernet/",
         "parachainId": 2125,
         "relayChain": "kusama",
@@ -197,8 +193,7 @@
         "decimals": 12,
         "symbol": "TNKR",
         "squids": {
-            "archive": "https://invarch-tinkernet.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-invarch-tinkernet/graphql"
+            "archive": "https://invarch-tinkernet.explorer.subsquid.io/graphql"
         }
     },
     {
@@ -404,7 +399,6 @@
         "symbol": "PHA",
         "squids": {
             "archive": "https://phala.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-phala/graphql",
             "main": "https://squid.subsquid.io/gs-main-phala/graphql"
         },
         "coinGeckoId": "pha"
@@ -521,8 +515,7 @@
         "symbol": "DOT",
         "squids": {
             "archive": "https://statemint.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-statemint/graphql",
-            "main": "https://squid.subsquid.io/gs-main-statemint/graphql"
+            "explorer": "https://squid.subsquid.io/gs-explorer-statemint/graphql"
         },
         "coinGeckoId": "polkadot"
     },
@@ -580,8 +573,7 @@
         "decimals": 9,
         "symbol": "XX",
         "squids": {
-            "archive": "https://xx-network.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-xx-network/graphql"
+            "archive": "https://xx-network.explorer.subsquid.io/graphql"
         },
         "coinGeckoId": "xxcoin"
     }
diff --git a/src/screens/account.tsx b/src/screens/account.tsx
index 042b9f61..4495ab26 100644
--- a/src/screens/account.tsx
+++ b/src/screens/account.tsx
@@ -116,9 +116,9 @@ export const AccountPage = () => {
 	return (
 		<>
 			<CardRow>
-				<Card css={accountInfoStyle} data-test="account-info">
-					<CardHeader>
-						Account
+				<Card css={accountInfoStyle} data-test="item-info">
+					<CardHeader data-test="item-header">
+						Account{" "}
 						{(account.loading || account.data) &&
 							<AccountAvatar address={address} size={32} css={avatarStyle} />
 						}
@@ -158,7 +158,7 @@ export const AccountPage = () => {
 				</Card>
 			</CardRow>
 			{account.data &&
-				<Card data-test="account-related-items">
+				<Card data-test="related-items">
 					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Balances"
diff --git a/src/screens/block.tsx b/src/screens/block.tsx
index 4ea22a54..75a660f2 100644
--- a/src/screens/block.tsx
+++ b/src/screens/block.tsx
@@ -56,8 +56,8 @@ export const BlockPage = () => {
 
 	return (
 		<>
-			<Card>
-				<CardHeader>
+			<Card data-test="item-info">
+				<CardHeader data-test="item-header">
 					Block #{id}
 					<CopyToClipboardButton value={id} />
 				</CardHeader>
@@ -67,7 +67,7 @@ export const BlockPage = () => {
 				/>
 			</Card>
 			{block.data &&
-				<Card>
+				<Card data-test="related-items">
 					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Extrinsics"
diff --git a/src/screens/call.tsx b/src/screens/call.tsx
index 4f9e4327..4055fc38 100644
--- a/src/screens/call.tsx
+++ b/src/screens/call.tsx
@@ -38,15 +38,15 @@ export const CallPage = () => {
 
 	return (
 		<>
-			<Card>
-				<CardHeader>
+			<Card data-test="item-info">
+				<CardHeader data-test="item-header">
 					Call #{id}
 					<CopyToClipboardButton value={id} />
 				</CardHeader>
 				<CallInfoTable network={network} call={call} />
 			</Card>
 			{call.data &&
-				<Card>
+				<Card data-test="related-items">
 					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Events"
diff --git a/src/screens/event.tsx b/src/screens/event.tsx
index 0295c916..f14bb6ec 100644
--- a/src/screens/event.tsx
+++ b/src/screens/event.tsx
@@ -20,8 +20,8 @@ export const EventPage = () => {
 	useDOMEventTrigger("data-loaded", !event.loading);
 
 	return (
-		<Card>
-			<CardHeader>
+		<Card data-test="item-info">
+			<CardHeader data-test="item-header">
 				Event #{id}
 				<CopyToClipboardButton value={id} />
 			</CardHeader>
diff --git a/src/screens/extrinsic.tsx b/src/screens/extrinsic.tsx
index 3c1aceaa..f0f92780 100644
--- a/src/screens/extrinsic.tsx
+++ b/src/screens/extrinsic.tsx
@@ -45,8 +45,8 @@ export const ExtrinsicPage = () => {
 
 	return (
 		<>
-			<Card>
-				<CardHeader>
+			<Card data-test="item-info">
+				<CardHeader data-test="item-header">
 					Extrinsic #{id}
 					<CopyToClipboardButton value={id} />
 				</CardHeader>
@@ -56,7 +56,7 @@ export const ExtrinsicPage = () => {
 				/>
 			</Card>
 			{extrinsic.data &&
-				<Card>
+				<Card data-test="related-items">
 					<TabbedContent currentTab={tab} onTabChange={setTab}>
 						<TabPane
 							label="Events"
diff --git a/src/screens/network.tsx b/src/screens/network.tsx
index e214d7a3..30811439 100644
--- a/src/screens/network.tsx
+++ b/src/screens/network.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { Theme, css } from "@emotion/react";
 
-import BalancesTable from "../components/balances/BalancesTable";
+import HoldersTable from "../components/account/HoldersTable";
 import BlocksTable from "../components/blocks/BlocksTable";
 import { Card, CardHeader, CardRow } from "../components/Card";
 import ExtrinsicsTable from "../components/extrinsics/ExtrinsicsTable";
@@ -84,8 +84,8 @@ export const NetworkPage = () => {
 	return (
 		<>
 			<CardRow>
-				<Card data-test="network-stats">
-					<CardHeader>
+				<Card data-test="item-info">
+					<CardHeader data-test="item-header">
 						<img css={networkIconStyle} src={network.icon} />
 						{network.displayName}
 					</CardHeader>
@@ -105,7 +105,7 @@ export const NetworkPage = () => {
 					</Card>
 				}
 			</CardRow>
-			<Card data-test="network-related-items">
+			<Card data-test="related-items">
 				<TabbedContent currentTab={tab} onTabChange={setTab}>
 					<TabPane
 						label="Extrinsics"
@@ -159,9 +159,9 @@ export const NetworkPage = () => {
 							count={topHolders.totalCount}
 							loading={topHolders.loading}
 							error={topHolders.error}
-							value="top-holders"
+							value="holders"
 						>
-							<BalancesTable
+							<HoldersTable
 								network={network}
 								balances={topHolders}
 								usdRates={usdRates}
diff --git a/src/screens/search.tsx b/src/screens/search.tsx
index 38316c4a..d470dbff 100644
--- a/src/screens/search.tsx
+++ b/src/screens/search.tsx
@@ -23,7 +23,7 @@ import { useTab } from "../hooks/useTab";
 import { getNetworks, hasSupport } from "../services/networksService";
 import { getQueryType } from "../services/searchService";
 
-import { isDeepEqual } from "../utils/equal";
+import { isDeepEqual } from "../utils/object";
 
 const queryStyle = css`
 	font-weight: normal;
@@ -51,6 +51,8 @@ const queryStyle2 = css`
 	background-color: #f5f5f5;
 	border-radius: 6px;
 
+	word-break: break-all;
+
 	&::before {
 		content: open-quote;
 	}
@@ -154,7 +156,7 @@ export const SearchPage = () => {
 			&& isDeepEqual(networkNames, previousNetworkNamesRef.current)
 	});
 
-	console.log("results", searchResult);
+	console.log("results!!", searchResult);
 
 	const searchByNameUnsupportNetworks = networks.filter(it =>
 		getQueryType(it, query) === "name" && !hasSupport(it.name, "explorer-squid")
@@ -209,7 +211,7 @@ export const SearchPage = () => {
 
 	return (
 		<>
-			<Card>
+			<Card data-test="search-results">
 				<CardHeader>
 					Search results
 				</CardHeader>
@@ -267,7 +269,11 @@ export const SearchPage = () => {
 					<NotFound css={notFoundStyle}>Nothing was found</NotFound>
 				)}
 				{searchResult.data && searchResult.data.totalCount > 0 && (
-					<TabbedContent css={resultsStyle} currentTab={tab} onTabChange={setTab}>
+					<TabbedContent
+						css={resultsStyle}
+						currentTab={tab}
+						onTabChange={setTab}
+					>
 						<TabPane
 							value="accounts"
 							label="Accounts"
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 87090df0..42f202ca 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -574,7 +574,7 @@ function networkResultsToSearchResultItems<T extends {id: string, network: Netwo
 				network: result.network,
 				data: item,
 			});
-		} else if (totalCount > 1) {
+		} else if (items.totalCount > 1) {
 			data.push({
 				id: `${result.network.name}-grouped`,
 				network: result.network,
diff --git a/src/utils/equal.ts b/src/utils/equal.ts
deleted file mode 100644
index fe863da3..00000000
--- a/src/utils/equal.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isDeepEqual(a: any, b: any) {
-	return JSON.stringify(a) === JSON.stringify(b);
-}
diff --git a/src/utils/object.ts b/src/utils/object.ts
new file mode 100644
index 00000000..682a84b0
--- /dev/null
+++ b/src/utils/object.ts
@@ -0,0 +1,34 @@
+export function isDeepEqual(a: any, b: any): boolean {
+	if (a === b) {
+		return true;
+	}
+
+	if (Array.isArray(a) && Array.isArray(b)) {
+		return a.length === b.length
+			&& a.every((value, key) => isDeepEqual(value, b[key]));
+	}
+
+	if (typeof a === "object" && typeof b === "object") {
+		return isDeepEqual(Object.entries(a), Object.entries(b));
+	}
+
+	return false;
+}
+
+export function isSubset(a: any, b: any): boolean {
+	return Object.keys(a).every((key) => {
+		if (a[key] === b[key]) {
+			return true;
+		}
+
+		if (Array.isArray(a[key]) && Array.isArray(b[key])) {
+			return isDeepEqual(a[key], b[key]);
+		}
+
+		if (typeof a[key] === "object" && typeof b[key] === "object") {
+			return isSubset(a[key], b[key]);
+		}
+
+		return false;
+	});
+}
diff --git a/test/e2e/account.fixture.json b/test/e2e/account.fixture.json
deleted file mode 100644
index fc0fba20..00000000
--- a/test/e2e/account.fixture.json
+++ /dev/null
@@ -1,121 +0,0 @@
-{
-	"portfolio": {
-		"display": {
-			"total": "$90,599.25",
-			"free": "$89,482.25",
-			"reserved": "$1,116.99"
-		}
-	},
-	"balances": [
-		{
-			"network": "polkadot",
-			"response": {
-				"data": {
-					"balance": {
-						"id": "14mR4xpU4BwYTTFNwMJ7KJ81yqNiNxGUFL4e3GxVsN27YNTE",
-						"free": "87402905689471",
-						"reserved": "1252580000000",
-						"total": "88655485689471",
-						"updatedAtBlock": 14688400
-					}
-				}
-			},
-			"display": {
-				"total": ["8,865.549 DOT", "$54,958.89"],
-				"free": ["8,740.291 DOT", "$54,182.4"],
-				"reserved": ["125.258 DOT", "$776.49"]
-			}
-		},
-		{
-			"network": "kusama",
-			"response": {
-				"data": {
-					"balance": {
-						"id": "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE",
-						"free": "1036706567490360",
-						"reserved": "10000000000000",
-						"total": "1046706567490360",
-						"updatedAtBlock": 15120699
-					}
-				}
-			},
-			"display": {
-				"total": ["1,046.7066 KSM", "$35,640.36"],
-				"free": ["1,036.7066 KSM", "$35,299.86"],
-				"reserved": ["10 KSM", "$340.5"]
-			}
-		}
-	],
-	"usdRates": {
-		"acala": {
-			"usd": 0.10095716132266747
-		},
-		"ajuna-network": {
-			"usd": 0.09653799561492502
-		},
-		"astar": {
-			"usd": 0.06671228034583852
-		},
-		"bifrost-native-coin": {
-			"usd": 0.2572557324105002
-		},
-		"calamari-network": {
-			"usd": 0.0029160551390530884
-		},
-		"crust-network": {
-			"usd": 1.3214384675614104
-		},
-		"efinity": {
-			"usd": 0.07844182704147619
-		},
-		"hydradx": {
-			"usd": 0.0049507264056983845
-		},
-		"interlay": {
-			"usd": 0.02523178816567064
-		},
-		"karura": {
-			"usd": 0.1775392378923781
-		},
-		"kintsugi": {
-			"usd": 0.7153196728566998
-		},
-		"kusama": {
-			"usd": 34.049998856917504
-		},
-		"litentry": {
-			"usd": 1.0641267193890938
-		},
-		"moonbeam": {
-			"usd": 0.39374864138778903
-		},
-		"moonriver": {
-			"usd": 8.462721960240877
-		},
-		"pendulum-chain": {
-			"usd": 0.17872398273981763
-		},
-		"pha": {
-			"usd": 0.15577729652305197
-		},
-		"polkadot": {
-			"usd": 6.199152832501991
-		},
-		"quartz": {
-			"usd": 0.0010252500189900412
-		},
-		"robonomics-network": {
-			"usd": 6.107273921732528
-		},
-		"shiden": {
-			"usd": 0.40098638383359503
-		},
-		"snow": {},
-		"unique-network": {
-			"usd": 0.010558434018992268
-		},
-		"xxcoin": {
-			"usd": 0.24451839595093813
-		}
-	}
-}
diff --git a/test/e2e/account.spec.ts b/test/e2e/account.spec.ts
index 6f49c3d2..aaf071f0 100644
--- a/test/e2e/account.spec.ts
+++ b/test/e2e/account.spec.ts
@@ -1,104 +1,186 @@
-import { Request } from "@playwright/test";
-
-import { encodeAddress } from "../../src/utils/address";
-import { getNetwork } from "../../src/services/networksService";
+import { Locator } from "@playwright/test";
 
 import { clearCapturedPageEvents, waitForPageEvent } from "../utils/events";
-import { mockRequest } from "../utils/mockRequest";
+import { getTableData } from "../utils/getTableData";
+import { matchSquidRequest } from "../utils/matchSquidRequest";
 import { navigate } from "../utils/navigate";
-import { removeContent } from "../utils/removeContent";
-import { test, expect } from "../utils/test";
+import { useDataFixture } from "../utils/useDataFixture";
+import { useRequestFixture } from "../utils/useRequestFixture";
 
-import fixtures from "./account.fixture.json";
+import { expect, test } from "../test";
 
-function isAccountBalanceQuery(request: Request, networkName?: string, address?: string) {
-	const network = networkName ? getNetwork(networkName) : undefined;
+import { TestItem } from "./templates/model";
+import { testItemInfo } from "./templates/testItemInfo";
+import { testItemError } from "./templates/testItemError";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { testRelatedItemsError } from "./templates/testRelatedItemsError";
+import { mockRequestsWithFixture } from "./templates/utils";
 
-	if (!request.url().match(`gs-stats-${network?.name || ""}`)) {
-		return false;
-	}
+test.describe("Account detail page", () => {
+	const url = "/kusama/account/GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE";
+
+	const account: TestItem = {
+		name: "account",
+		requests: [{
+			queryProp: "identity",
+			squidType: "gs-main",
+			variables: {
+				id: "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE",
+			},
+			dataType: "item"
+		}],
+	};
+
+	const relatedBalances: TestItem = {
+		name: "balance",
+		requests: [{
+			queryProp: "balance",
+			squidType: "gs-stats",
+			dataType: "item"
+		}]
+	};
+
+	const relatedExtrinsics: TestItem = {
+		name: "extrinsic",
+		requests: [{
+			queryProp: "extrinsicsConnection",
+			squidType: "gs-explorer",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedCalls: TestItem = {
+		name: "call",
+		requests: [{
+			queryProp: "callsConnection",
+			squidType: "gs-explorer",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedTransfers: TestItem = {
+		name: "transfer",
+		requests: [{
+			queryProp: "transfersConnection",
+			squidType: "gs-main",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	mockRequestsWithFixture(account, [
+		relatedBalances,
+		relatedExtrinsics,
+		relatedCalls,
+		relatedTransfers
+	]);
 
-	if (!request.postDataJSON()?.query.match("accountById")) {
-		return false;
-	}
+	test.beforeEach(async ({ page }) => {
+		await page.route("https://api.coingecko.com/api/v3/simple/price?*", async (route, request) => {
+			route.fulfill(await useRequestFixture("usd-rates-request", route));
+		});
+	});
 
-	if (network && address && request.postDataJSON()?.variables?.address !== encodeAddress(address, network.prefix)) {
-		return false;
-	}
+	testItemInfo(url, account);
+	testItemError(url, account);
 
-	return true;
-}
+	testRelatedItems(url, account, relatedBalances);
 
-test.describe("Account detail page", () => {
-	const address = "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840";
+	testRelatedItems(url, account, relatedExtrinsics);
+	testRelatedItemsError(url, account, relatedExtrinsics, relatedExtrinsics.requests);
 
-	// mock balances
-	test.beforeEach(async ({ page }) => {
-		await page.route("**/*", (route, request) => {
-			for (const balanceFixture of fixtures.balances) {
-				if (isAccountBalanceQuery(request, balanceFixture.network, address)) {
-					return route.fulfill({
-						status: 200,
-						body: JSON.stringify(balanceFixture.response)
-					});
-				}
-			}
+	testRelatedItems(url, account, relatedCalls);
+	testRelatedItemsError(url, account, relatedCalls, relatedCalls.requests);
 
-			route.continue();
-		});
+	testRelatedItems(url, account, relatedTransfers);
+	testRelatedItemsError(url, account, relatedTransfers, relatedTransfers.requests);
 
-		await page.route("https://api.coingecko.com/api/v3/simple/price?*", (route, request) => {
-			route.fulfill({
-				status: 200,
-				body: JSON.stringify(fixtures.usdRates)
-			});
-		});
+	test("show account identity info", async ({ page, takeScreenshot }) => {
+		await navigate(page, "/kusama/account/EMRpBNnfAqRb62b14cxmnCdihtUjEeyh6tfyhGwnGwxjY8F");
+
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $identityInfo = $info.getByTestId("account-identity-info");
+
+		await expect($header).toHaveText(
+			await useDataFixture("account-identity-data", "header", $header)
+		);
+
+		const getIdentityInfoData = async (locator: Locator) => await locator.locator("> div").allInnerTexts();
+
+		await expect(async () => {
+			const identityInfoData = await getIdentityInfoData($identityInfo);
+			expect(identityInfoData).toEqual(
+				await useDataFixture(
+					"account-identity-data",
+					"identityInfo",
+					$identityInfo,
+					getIdentityInfoData
+				)
+			);
+		}).toPass({timeout: 5000});
+
+		await takeScreenshot("account-identity-info", $info);
 	});
 
-	test("shows account balance info", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
+	test("shows error message if account address is not valid", async ({ page, takeScreenshot }) => {
+		const id = "0x123456789";
+
+		await navigate(page, `/kusama/account/${id}`);
 
-		const info = page.getByTestId("account-info");
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $error = $info.getByTestId("error");
 
-		// TODO check data
+		await expect($header).toHaveText(
+			await useDataFixture("account-info-data", "invalidAddressHeader", $header)
+		);
 
-		await takeScreenshot("account-info", info);
+		await expect($error).toHaveText(
+			await useDataFixture("account-info-data", "invalidAddressError", $error)
+		);
+
+		await takeScreenshot("account-invlid-address-error", $info);
 	});
 
 	test("shows account balance portfolio", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
+		await navigate(page, url);
+
+		const $portfolio = page.getByTestId("account-portfolio");
 
 		for (const type of ["total", "free", "reserved"]) {
-			const balance = page.getByTestId(`porfolio-${type}`);
-			await expect(balance).toBeVisible();
-			await expect(balance).toContainText(fixtures.portfolio.display[type]);
+			const $balance = $portfolio.getByTestId(`porfolio-${type}`);
+			await expect($balance).toBeVisible();
+			await expect($balance).toContainText(
+				await useDataFixture("account-portfolio-data", type, $balance)
+			);
 		}
 
-		const portfolio = page.getByTestId("account-portfolio");
-
 		// check chart by network
-		await expect(page.getByTestId("account-portfolio-chart-by_network")).toBeVisible();
+		await expect($portfolio.getByTestId("account-portfolio-chart-by_network")).toBeVisible();
 		await waitForPageEvent(page, "chart-finished", (event: any) => {
 			return event.detail.containerRef?.getAttribute("data-test") === "account-portfolio-chart-by_network";
 		});
 
-		await takeScreenshot("account-porfolio-by-network", portfolio);
+		await takeScreenshot("account-porfolio-by-network", $portfolio);
 
 		// check chart by type
 		clearCapturedPageEvents(page, ["chart-finished"]);
-		await portfolio.locator("button[value=BY_TYPE]").click(),
+		await $portfolio.locator("button[value=BY_TYPE]").click(),
 
-		await expect(page.getByTestId("account-portfolio-chart-by_type")).toBeVisible();
+		await expect($portfolio.getByTestId("account-portfolio-chart-by_type")).toBeVisible();
 		await waitForPageEvent(page, "chart-finished", (event: any) => {
 			return event.detail.containerRef?.getAttribute("data-test") === "account-portfolio-chart-by_type";
 		});
 
-		await takeScreenshot("account-porfolio-by-type", portfolio);
+		await takeScreenshot("account-porfolio-by-type", $portfolio);
 	});
 
 	test("shows portfolio not found message if no account balances found", async ({ page, takeScreenshot }) => {
-		await page.route("**/*", (route, request) => {
-			if (isAccountBalanceQuery(request)) {
+		await page.route("**/*", (route) => {
+			if (matchSquidRequest(route.request(), {
+				squidType: "gs-stats",
+				queryProp: "balance"
+			})) {
 				return route.fulfill({
 					status: 200,
 					body: JSON.stringify({
@@ -112,40 +194,24 @@ test.describe("Account detail page", () => {
 			route.fallback();
 		});
 
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
+		await navigate(page, url);
 
-		const portfolio = page.getByTestId("account-portfolio");
+		const $portfolio = page.getByTestId("account-portfolio");
 
-		const notFoundMessage = portfolio.getByTestId("not-found");
-		await expect(notFoundMessage).toBeVisible();
-		await expect(notFoundMessage).toHaveText("No positive balances with conversion rate to USD found");
+		const $notFoundMessage = $portfolio.getByTestId("not-found");
+		await expect($notFoundMessage).toBeVisible();
+		await expect($notFoundMessage).toHaveText(await useDataFixture("account-portfolio-data", "notFound", $notFoundMessage));
 
-		await takeScreenshot("account-porfolio-not-found", portfolio);
-	});
-
-	test("shows account balances", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("balances-tab").click();
-
-		for (const balanceFixture of fixtures.balances) {
-			if (balanceFixture.response.data) {
-				for (const type of ["total", "free", "reserved"]) {
-					const balance = page.getByTestId(`${balanceFixture.network}-balance-${type}`);
-					await expect(balance).toBeVisible();
-					for (const display of balanceFixture.display?.[type] || []) {
-						await expect(balance).toContainText(display);
-					}
-				}
-			}
-		}
-
-		await takeScreenshot("account-balances", page.getByTestId("account-related-items"));
+		await takeScreenshot("account-porfolio-not-found", $portfolio);
 	});
 
 	test("shows error message if account balances fetch fails", async ({ page, takeScreenshot }) => {
-		await page.route("**/*", (route, request) => {
-			if (isAccountBalanceQuery(request, "kusama")) {
+		await page.route("**/*", (route) => {
+			if (matchSquidRequest(route.request(), {
+				squidType: "gs-stats",
+				network: "kusama",
+				queryProp: "balance",
+			})) {
 				return route.fulfill({
 					status: 200,
 					body: JSON.stringify({
@@ -159,169 +225,23 @@ test.describe("Account detail page", () => {
 			route.fallback();
 		});
 
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("balances-tab").click();
-
-		for (const balanceFixture of fixtures.balances) {
-			if (balanceFixture.network === "kusama") {
-				const errorMessage = page.getByTestId("kusama-balance-error");
-				await expect(errorMessage).toBeVisible();
-				await expect(errorMessage).toHaveText(/Unexpected error/);
-				await expect(errorMessage).toHaveText(/Kusama balance error/);
-			} else if (balanceFixture.response.data) {
-				for (const type of ["total", "free", "reserved"]) {
-					const balance = page.getByTestId(`${balanceFixture.network}-balance-${type}`);
-					await expect(balance).toBeVisible();
-					for (const display of balanceFixture.display?.[type] || []) {
-						await expect(balance).toContainText(display);
-					}
-				}
-			}
-		}
+		await navigate(page, url);
 
-		await takeScreenshot("account-balances-with-error", page.getByTestId("account-related-items"));
-	});
-
-	test("shows account detail page with extrinsics", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		await removeContent(page.locator("[data-test=extrinsics-table] tr td"));
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-extrinsics", accountRelatedItems);
-	});
-
-	test("shows account detail page with calls", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		await removeContent(page.locator("[data-test=calls-table] tr td"));
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-calls", accountRelatedItems);
-	});
+		const $relatedItems = page.getByTestId("related-items");
+		const $relatedItemTypeTab = $relatedItems.getByTestId("balances-tab");
+		const $relatedItemTypeTable = $relatedItems.getByTestId("balances-items").locator("table").first();
 
-	test("shows account detail page with transfers", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
+		await $relatedItemTypeTab.click();
 
-		await page.getByTestId("transfers-tab").click();
-
-		await removeContent(page.locator("[data-test=transfers-table] tr td"));
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-transfers", accountRelatedItems);
-	});
-
-	test("shows error message if account address is not valid", async ({ page, takeScreenshot }) => {
-		const id = "0x123456789";
-
-		await page.route("**/*", (route, request) => {
-			if (isAccountBalanceQuery(request)) {
-				return route.fulfill({
-					status: 200,
-					body: JSON.stringify({
-						data: {
-							balance: null
-						}
-					})
-				});
-			}
-
-			route.fallback();
-		});
-
-		await navigate(page, `/kusama/account/${id}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Invalid account address/);
-
-		await takeScreenshot("account-not-found");
-	});
-
-	test("shows error message when extrinsics items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsics"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsics error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Extrinsics error/);
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-extrinsics-error", accountRelatedItems);
-	});
-
-	test("shows error message when calls items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("calls"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Calls error"
-					}]
-				})
-			})
+		await expect($relatedItemTypeTable).toHaveTableData(
+			await useDataFixture(
+				"account-balances-data",
+				"itemsTableWithError",
+				$relatedItemTypeTable,
+				getTableData
+			)
 		);
 
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Calls error/);
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-calls-error", accountRelatedItems);
-	});
-
-	test("shows error message when transfers items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("transfers"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Transfers error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/account/${address}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("transfers-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Transfers error/);
-
-		const accountRelatedItems = page.getByTestId("account-related-items");
-		await takeScreenshot("account-with-transfers-error", accountRelatedItems);
+		await takeScreenshot("account-balances-with-error", $relatedItems);
 	});
 });
diff --git a/test/e2e/block.spec.ts b/test/e2e/block.spec.ts
index 33dd22c2..446c8c2d 100644
--- a/test/e2e/block.spec.ts
+++ b/test/e2e/block.spec.ts
@@ -1,141 +1,105 @@
-import { mockRequest } from "../utils/mockRequest";
-import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+import { test } from "../test";
 
-test.describe("Block detail page", () => {
-	const blockId = "0014932897-93378";
-
-	test("shows block detail page with extrinsics", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		await takeScreenshot("block-with-extrinsics");
-	});
-
-	test("shows block detail page with calls", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		await takeScreenshot("block-with-calls");
-	});
-
-	test("shows block detail page with events", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("events-tab").click();
-
-		await takeScreenshot("block-with-events");
-	});
-
-	test("shows not found message if block was not found", async ({ page, takeScreenshot }) => {
-		const id = "111-22-3";
-
-		await navigate(page, `/kusama/block/${id}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText("No block found");
-
-		await takeScreenshot("block-not-found");
-	});
-
-	test("show error message when block data fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("block"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Block error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Block error/);
+import { testItemInfo } from "./templates/testItemInfo";
+import { TestItem } from "./templates/model";
+import { testItemNotFound } from "./templates/testItemNotFound";
+import { testItemError } from "./templates/testItemError";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { testRelatedItemsError } from "./templates/testRelatedItemsError";
+import { mockRequestsWithFixture } from "./templates/utils";
+import { testRedirect } from "./templates/testRedirect";
 
-		await takeScreenshot("block-error");
-	});
-
-	test("show error message when extrinsics items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsics"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsics error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Extrinsics error/);
-
-		await takeScreenshot("block-with-extrinsics-error");
-	});
-
-	test("show error message when calls items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("calls"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Calls error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Calls error/);
-
-		await takeScreenshot("block-with-calls-error");
-	});
-
-	test("show error message when events items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("events"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Events error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/block/${blockId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("events-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Events error/);
-
-		await takeScreenshot("block-with-events-error");
-	});
+test.describe("Block detail page", () => {
+	const url = "/polkadot/block/18278717";
+
+	const block: TestItem = {
+		name: "block",
+		requests: [{
+			queryProp: "blocks",
+			squidType: "gs-explorer",
+			variables: {
+				filter: {
+					height_eq: 18278717
+				}
+			},
+			dataType: "items"
+		}]
+	};
+
+	const relatedExtrinsics: TestItem = {
+		name: "extrinsic",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "extrinsicsConnection",
+			variables: {
+				filter: {
+					block: {
+						id_eq: "0018278717-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedCalls: TestItem = {
+		name: "call",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "callsConnection",
+			variables: {
+				filter: {
+					block: {
+						id_eq: "0018278717-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedEvents: TestItem = {
+		name: "event",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "eventsConnection",
+			variables: {
+				filter: {
+					block: {
+						id_eq: "0018278717-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}, {
+			squidType: "archive",
+			queryProp: "events",
+			dataType: "items"
+		}]
+	};
+
+	mockRequestsWithFixture(block, [
+		relatedExtrinsics,
+		relatedCalls,
+		relatedEvents
+	]);
+
+	testItemInfo(url, block);
+	testItemNotFound(url, block);
+	testItemError(url, block);
+
+	testRelatedItems(url, block, relatedExtrinsics);
+	testRelatedItemsError(url, block, relatedExtrinsics, relatedExtrinsics.requests);
+
+	testRelatedItems(url, block, relatedCalls);
+	testRelatedItemsError(url, block, relatedCalls, relatedCalls.requests);
+
+	testRelatedItems(url, block, relatedEvents);
+	testRelatedItemsError(url, block, relatedEvents, relatedEvents.requests);
+
+	testRedirect(
+		"redirects to simplified ID",
+		"/polkadot/block/0018278717-673df",
+		"/polkadot/block/18278717"
+	);
 });
diff --git a/test/e2e/call.spec.ts b/test/e2e/call.spec.ts
index 5218d77e..7977d416 100644
--- a/test/e2e/call.spec.ts
+++ b/test/e2e/call.spec.ts
@@ -1,73 +1,74 @@
-import { mockRequest } from "../utils/mockRequest";
-import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+import { test } from "../test";
 
-test.describe("Call detail page", () => {
-	const callId = "0015163154-000002-44488";
-
-	test("shows call detail page with events", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/call/${callId}`, {waitUntil: "data-loaded"});
-
-		await takeScreenshot("call-with-events");
-	});
-
-	test("shows not found message if call was not found", async ({ page, takeScreenshot }) => {
-		const id = "111-22-3";
-
-		await navigate(page, `/kusama/call/${id}`, {waitUntil: "data-loaded"});
+import { TestItem } from "./templates/model";
+import { testItemError } from "./templates/testItemError";
+import { testItemInfo } from "./templates/testItemInfo";
+import { testItemNotFound } from "./templates/testItemNotFound";
+import { testRedirect } from "./templates/testRedirect";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { testRelatedItemsError } from "./templates/testRelatedItemsError";
+import { mockRequestsWithFixture } from "./templates/utils";
 
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText("No call found");
-
-		await takeScreenshot("call-not-found");
-	});
-
-	test("show error message when call data fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("call"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Call error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/call/${callId}`, {waitUntil: "data-loaded"});
+test.describe("Call detail page", () => {
+	const url = "/polkadot/call/18278717-3";
 
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Call error/);
+	const call: TestItem = {
+		name: "call",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "calls",
+			variables: {
+				filter: {
+					block: {
+						height_eq: 18278717
+					},
+					extrinsic: {
+						indexInBlock_eq: 3
+					},
+					parentId_isNull: true
+				}
+			},
+			dataType: "items"
+		},{
+			squidType: "archive",
+			queryProp: "calls",
+			variables: {
+				ids: [ "0018278717-000003-673df" ]
+			},
+			dataType: "items"
+		}]
+	};
 
-		await takeScreenshot("call-error");
-	});
+	const relatedEvents: TestItem = {
+		name: "event",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "eventsConnection",
+			variables: {
+				filter: {
+					call: {
+						id_eq: "0018278717-000003-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}]
+	};
 
-	test("show error message when events items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("events"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Events error"
-					}]
-				})
-			})
-		);
+	mockRequestsWithFixture(call, [
+		relatedEvents
+	]);
 
-		await navigate(page, `/kusama/call/${callId}`, {waitUntil: "data-loaded"});
+	testItemInfo(url, call);
+	testItemNotFound(url, call);
+	testItemError(url, call);
 
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Events error/);
+	testRelatedItems(url, call, relatedEvents);
+	testRelatedItemsError(url, call, relatedEvents, relatedEvents.requests);
 
-		await takeScreenshot("call-with-events-error");
-	});
+	testRedirect(
+		"redirects to simplified ID",
+		"/polkadot/call/0018278717-000003-673df",
+		"/polkadot/call/18278717-3"
+	);
 });
diff --git a/test/e2e/event.spec.ts b/test/e2e/event.spec.ts
index ba4b8fe9..381ddffe 100644
--- a/test/e2e/event.spec.ts
+++ b/test/e2e/event.spec.ts
@@ -1,49 +1,46 @@
-import { mockRequest } from "../utils/mockRequest";
-import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+import { test } from "../test";
 
+import { TestItem } from "./templates/model";
+import { testItemError } from "./templates/testItemError";
+import { testItemInfo } from "./templates/testItemInfo";
+import { testItemNotFound } from "./templates/testItemNotFound";
+import { testRedirect } from "./templates/testRedirect";
+import { mockRequestsWithFixture } from "./templates/utils";
 
 test.describe("Event detail page", () => {
-	const eventId = "0015163154-000040-44488";
-	test("shows event detail page", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/event/${eventId}`, {waitUntil: "data-loaded"});
-
-		await takeScreenshot("event");
-	});
-
-	test("shows not found message if event was not found", async ({ page, takeScreenshot }) => {
-		const id = "111-22-3";
-
-		await navigate(page, `/kusama/event/${id}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText("No event found");
-
-		await takeScreenshot("event-not-found");
-	});
-
-	test("show error message when event data fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("event"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Event error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/event/${eventId}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Event error/);
-
-		await takeScreenshot("event-error");
-	});
+	const url = "/polkadot/event/18278717-51";
+
+	const event: TestItem = {
+		name: "event",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "events",
+			variables: {
+				filter: {
+					blockNumber_eq: 18278717,
+					indexInBlock_eq: 51
+				}
+			},
+			dataType: "items"
+		}, {
+			squidType: "archive",
+			queryProp: "events",
+			variables: {
+				ids: ["0018278717-000051-673df"]
+			},
+			dataType: "items"
+		}]
+	};
+
+	mockRequestsWithFixture(event);
+
+	testItemInfo(url, event);
+	testItemNotFound(url, event);
+	testItemError(url, event);
+
+	testRedirect(
+		"redirects to simplified ID",
+		"/polkadot/event/0018278717-000051-673df",
+		"/polkadot/event/18278717-51"
+	);
 });
diff --git a/test/e2e/extrinsic.spec.ts b/test/e2e/extrinsic.spec.ts
index db7e99a5..cb4ad03d 100644
--- a/test/e2e/extrinsic.spec.ts
+++ b/test/e2e/extrinsic.spec.ts
@@ -1,107 +1,88 @@
-import { mockRequest } from "../utils/mockRequest";
-import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+import { test } from "../test";
 
-test.describe("Extrinsic detail page", () => {
-	const extrinsicId = "0014932897-000002-93378";
-
-	test("shows extrinsic detail page with events", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/extrinsic/${extrinsicId}`, {waitUntil: "data-loaded"});
-
-		await takeScreenshot("extrinsic-with-events");
-	});
-
-	test("shows extrinsic detail page with calls", async ({ page, takeScreenshot }) => {
-		await navigate(page, `/kusama/extrinsic/${extrinsicId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		await takeScreenshot("extrinsic-with-calls");
-	});
-
-	test("shows not found message if extrinsic was not found", async ({ page, takeScreenshot }) => {
-		const id = "111-22-3";
-
-		await navigate(page, `/kusama/extrinsic/${id}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText("No extrinsic found");
-
-		await takeScreenshot("extrinsic-not-found");
-	});
-
-	test("show error message when item data fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsic"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsic error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/extrinsic/${extrinsicId}`, {waitUntil: "data-loaded"});
+import { TestItem } from "./templates/model";
+import { testItemError } from "./templates/testItemError";
+import { testItemInfo } from "./templates/testItemInfo";
+import { testItemNotFound } from "./templates/testItemNotFound";
+import { testRedirect } from "./templates/testRedirect";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { testRelatedItemsError } from "./templates/testRelatedItemsError";
+import { mockRequestsWithFixture } from "./templates/utils";
 
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Extrinsic error/);
-
-		await takeScreenshot("extrinsic-error");
-	});
-
-	test("show error message when events items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("events"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Events error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/extrinsic/${extrinsicId}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Events error/);
-
-		await takeScreenshot("extrinsic-with-events-error");
-	});
-
-	test("show error message when calls items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("calls"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Calls error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/extrinsic/${extrinsicId}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("calls-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Calls error/);
-
-		await takeScreenshot("extrinsic-with-calls-error");
-	});
+test.describe("Extrinsic detail page", () => {
+	const url = "/polkadot/extrinsic/18278717-3";
+
+	const extrinsic: TestItem = {
+		name: "extrinsic",
+		requests: [{
+			squidType: "archive",
+			queryProp: "extrinsics",
+			variables: {
+				filter: {
+					block: {
+						height_eq: 18278717
+					},
+					indexInBlock_eq: 3
+				}
+			},
+			dataType: "items"
+		}]
+	};
+
+	const relatedCalls: TestItem = {
+		name: "call",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "callsConnection",
+			variables: {
+				filter: {
+					extrinsic: {
+						id_eq: "0018278717-000003-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedEvents: TestItem = {
+		name: "event",
+		requests: [{
+			squidType: "gs-explorer",
+			queryProp: "eventsConnection",
+			variables: {
+				filter: {
+					extrinsic: {
+						id_eq: "0018278717-000003-673df"
+					}
+				}
+			},
+			dataType: "itemsConnection"
+		}, {
+			squidType: "archive",
+			queryProp: "events",
+			dataType: "items"
+		}]
+	};
+
+	mockRequestsWithFixture(extrinsic, [
+		relatedCalls,
+		relatedEvents
+	]);
+
+	testItemInfo(url, extrinsic);
+	testItemNotFound(url, extrinsic);
+	testItemError(url, extrinsic);
+
+	testRelatedItems(url, extrinsic, relatedCalls);
+	testRelatedItemsError(url, extrinsic, relatedCalls, relatedCalls.requests);
+
+	testRelatedItems(url, extrinsic, relatedEvents);
+	testRelatedItemsError(url, extrinsic, relatedEvents, relatedEvents.requests);
+
+	testRedirect(
+		"redirects to simplified ID",
+		"/polkadot/extrinsic/0018278717-000003-673df",
+		"/polkadot/extrinsic/18278717-3"
+	);
 });
diff --git a/test/e2e/fixtures/account-balances-data.json b/test/e2e/fixtures/account-balances-data.json
new file mode 100644
index 00000000..dceef9f8
--- /dev/null
+++ b/test/e2e/fixtures/account-balances-data.json
@@ -0,0 +1,93 @@
+{
+  "itemsCount": "(35)",
+  "itemsTable": [
+    [
+      "Polkadot\n14mR4x...27YNTE\nprefix: 0",
+      "8,865.048 DOT\n$46,138.83",
+      "8,739.79 DOT\n$45,486.92",
+      "125.258 DOT\n$651.92"
+    ],
+    [
+      "Kusama\nGLjawu...D66wGE\nprefix: 2",
+      "14.7053 KSM\n$361.64",
+      "4.7053 KSM\n$115.72",
+      "10 KSM\n$245.92"
+    ],
+    [
+      "Acala\n24e1et...xzMdsr\nprefix: 10",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Aleph Zero Testnet\n5Fq7vd...zbMpG6\nprefix: 42",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Amplitude\n6ke1oW...uuaqRK\nprefix: 57",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Astar Network\nZhiMvX...zYwjYw\nprefix: 5",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Bajun Network\nbUMbQK...JNc7cn\nprefix: 1337",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Bifrost Kusama\nfVNcv4...b3E5ct\nprefix: 6",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Calamari Network\ndmxheR...VHSxDb\nprefix: 78",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Equilibrium\ncg6sV1...wDKwnz\nprefix: 68",
+      "Account balance for this network is not currently supported."
+    ]
+  ],
+  "itemsTableWithError": [
+    [
+      "Polkadot\n14mR4x...27YNTE\nprefix: 0",
+      "8,865.048 DOT\n$46,138.83",
+      "8,739.79 DOT\n$45,486.92",
+      "125.258 DOT\n$651.92"
+    ],
+    [
+      "Kusama\nGLjawu...D66wGE\nprefix: 2",
+      "Unexpected error occured while fetching data\nThis error is logged. No need to report it.\nDetails"
+    ],
+    [
+      "Acala\n24e1et...xzMdsr\nprefix: 10",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Aleph Zero Testnet\n5Fq7vd...zbMpG6\nprefix: 42",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Amplitude\n6ke1oW...uuaqRK\nprefix: 57",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Astar Network\nZhiMvX...zYwjYw\nprefix: 5",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Bajun Network\nbUMbQK...JNc7cn\nprefix: 1337",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Bifrost Kusama\nfVNcv4...b3E5ct\nprefix: 6",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Calamari Network\ndmxheR...VHSxDb\nprefix: 78",
+      "Account balance for this network is not currently supported."
+    ],
+    [
+      "Equilibrium\ncg6sV1...wDKwnz\nprefix: 68",
+      "Account balance for this network is not currently supported."
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-balances-request.json b/test/e2e/fixtures/account-balances-request.json
new file mode 100644
index 00000000..491812f8
--- /dev/null
+++ b/test/e2e/fixtures/account-balances-request.json
@@ -0,0 +1,140 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": {
+            "id": "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE",
+            "free": "4705349881534",
+            "reserved": "10000000000000",
+            "total": "14705349881534",
+            "updatedAtBlock": 19780727
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "14mR4xpU4BwYTTFNwMJ7KJ81yqNiNxGUFL4e3GxVsN27YNTE"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": {
+            "id": "14mR4xpU4BwYTTFNwMJ7KJ81yqNiNxGUFL4e3GxVsN27YNTE",
+            "free": "87397896679124",
+            "reserved": "1252580000000",
+            "total": "88650476679124",
+            "updatedAtBlock": 17113189
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "EMRpBNnfAqRb62b14cxmnCdihtUjEeyh6tfyhGwnGwxjY8F"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": {
+            "id": "EMRpBNnfAqRb62b14cxmnCdihtUjEeyh6tfyhGwnGwxjY8F",
+            "free": "292972938052712",
+            "reserved": "33333333000",
+            "total": "293006271385712",
+            "updatedAtBlock": 18144450
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "12n7JCHytb5yGyDfBzrv1yfnRjbtcsPwKDnQkKzLrZkzB68m"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": null
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "0x123456789"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": null
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "\n\t\t\t\tquery ($address: String!) {\n\t\t\t\t\tbalance: accountById(id: $address) {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tfree\n\t\t\t\t\t\treserved\n\t\t\t\t\t\ttotal\n\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\n",
+        "variables": {
+          "address": "0x123456789"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "balance": null
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-calls-data.json b/test/e2e/fixtures/account-calls-data.json
new file mode 100644
index 00000000..0fe012a3
--- /dev/null
+++ b/test/e2e/fixtures/account-calls-data.json
@@ -0,0 +1,56 @@
+{
+  "itemsCount": "(69)",
+  "itemsTable": [
+    [
+      "19780727-2",
+      "Balances.transfer_keep_alive",
+      "19780727-2"
+    ],
+    [
+      "18963360-6",
+      "XcmPallet.limited_teleport_assets",
+      "18963360-6"
+    ],
+    [
+      "14994065-4",
+      "Balances.transfer_keep_alive",
+      "14994065-4"
+    ],
+    [
+      "13127471-2-2",
+      "System.remark",
+      "13127471-2"
+    ],
+    [
+      "13127471-2-1",
+      "System.remark",
+      "13127471-2"
+    ],
+    [
+      "13127471-2",
+      "Utility.batch_all",
+      "13127471-2"
+    ],
+    [
+      "13127388-2-2",
+      "System.remark",
+      "13127388-2"
+    ],
+    [
+      "13127388-2-1",
+      "System.remark",
+      "13127388-2"
+    ],
+    [
+      "13127388-2",
+      "Utility.batch_all",
+      "13127388-2"
+    ],
+    [
+      "10189163-5",
+      "Crowdloan.contribute",
+      "10189163-5"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailscalls error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-calls-request.json b/test/e2e/fixtures/account-calls-request.json
new file mode 100644
index 00000000..c30dd540
--- /dev/null
+++ b/test/e2e/fixtures/account-calls-request.json
@@ -0,0 +1,506 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {\n\t\t\tcallsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidCallsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCallsConnection on CallsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "callerPublicKey_eq": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "callsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0019780727-000002-9c0ba",
+                  "callName": "transfer_keep_alive",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0019780727-9c0ba",
+                    "height": 19780727,
+                    "timestamp": "2023-09-21T19:23:00.000000Z",
+                    "specVersion": 9430
+                  },
+                  "extrinsic": {
+                    "id": "0019780727-000002-9c0ba",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018963360-000006-41f61",
+                  "callName": "limited_teleport_assets",
+                  "palletName": "XcmPallet",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0018963360-41f61",
+                    "height": 18963360,
+                    "timestamp": "2023-07-26T22:41:30.000000Z",
+                    "specVersion": 9430
+                  },
+                  "extrinsic": {
+                    "id": "0018963360-000006-41f61",
+                    "indexInBlock": 6
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0014994065-000004-1655d",
+                  "callName": "transfer_keep_alive",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0014994065-1655d",
+                    "height": 14994065,
+                    "timestamp": "2022-10-22T13:34:06.011000Z",
+                    "specVersion": 9291
+                  },
+                  "extrinsic": {
+                    "id": "0014994065-000004-1655d",
+                    "indexInBlock": 4
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127471-000002-b3d8d-000002",
+                  "callName": "remark",
+                  "palletName": "System",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": "0013127471-000002-b3d8d",
+                  "block": {
+                    "id": "0013127471-b3d8d",
+                    "height": 13127471,
+                    "timestamp": "2022-06-14T15:25:30.013000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127471-000002-b3d8d",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127471-000002-b3d8d-000001",
+                  "callName": "remark",
+                  "palletName": "System",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": "0013127471-000002-b3d8d",
+                  "block": {
+                    "id": "0013127471-b3d8d",
+                    "height": 13127471,
+                    "timestamp": "2022-06-14T15:25:30.013000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127471-000002-b3d8d",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127471-000002-b3d8d",
+                  "callName": "batch_all",
+                  "palletName": "Utility",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0013127471-b3d8d",
+                    "height": 13127471,
+                    "timestamp": "2022-06-14T15:25:30.013000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127471-000002-b3d8d",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127388-000002-f6c26-000002",
+                  "callName": "remark",
+                  "palletName": "System",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": "0013127388-000002-f6c26",
+                  "block": {
+                    "id": "0013127388-f6c26",
+                    "height": 13127388,
+                    "timestamp": "2022-06-14T15:17:12.018000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127388-000002-f6c26",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127388-000002-f6c26-000001",
+                  "callName": "remark",
+                  "palletName": "System",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": "0013127388-000002-f6c26",
+                  "block": {
+                    "id": "0013127388-f6c26",
+                    "height": 13127388,
+                    "timestamp": "2022-06-14T15:17:12.018000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127388-000002-f6c26",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127388-000002-f6c26",
+                  "callName": "batch_all",
+                  "palletName": "Utility",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0013127388-f6c26",
+                    "height": 13127388,
+                    "timestamp": "2022-06-14T15:17:12.018000Z",
+                    "specVersion": 9230
+                  },
+                  "extrinsic": {
+                    "id": "0013127388-000002-f6c26",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0010189163-000005-0c224",
+                  "callName": "contribute",
+                  "palletName": "Crowdloan",
+                  "success": true,
+                  "callerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "parentId": null,
+                  "block": {
+                    "id": "0010189163-0c224",
+                    "height": 10189163,
+                    "timestamp": "2021-11-21T09:40:42.009000Z",
+                    "specVersion": 9122
+                  },
+                  "extrinsic": {
+                    "id": "0010189163-000005-0c224",
+                    "indexInBlock": 5
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 69
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {\n\t\t\tcallsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidCallsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCallsConnection on CallsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "callerPublicKey_eq": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "callsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0016832516-000002-74481",
+                  "callName": "validate",
+                  "palletName": "Staking",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0016832516-74481",
+                    "height": 16832516,
+                    "timestamp": "2023-02-28T11:29:30.001000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832516-000002-74481",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832478-000002-d3414-000003",
+                  "callName": "validate",
+                  "palletName": "Staking",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": "0016832478-000002-d3414",
+                  "block": {
+                    "id": "0016832478-d3414",
+                    "height": 16832478,
+                    "timestamp": "2023-02-28T11:25:42.001000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832478-000002-d3414",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832478-000002-d3414-000002",
+                  "callName": "set_keys",
+                  "palletName": "Session",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": "0016832478-000002-d3414",
+                  "block": {
+                    "id": "0016832478-d3414",
+                    "height": 16832478,
+                    "timestamp": "2023-02-28T11:25:42.001000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832478-000002-d3414",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832478-000002-d3414-000001",
+                  "callName": "bond",
+                  "palletName": "Staking",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": "0016832478-000002-d3414",
+                  "block": {
+                    "id": "0016832478-d3414",
+                    "height": 16832478,
+                    "timestamp": "2023-02-28T11:25:42.001000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832478-000002-d3414",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832478-000002-d3414",
+                  "callName": "batch_all",
+                  "palletName": "Utility",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0016832478-d3414",
+                    "height": 16832478,
+                    "timestamp": "2023-02-28T11:25:42.001000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832478-000002-d3414",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832413-000002-d71c3",
+                  "callName": "withdraw_unbonded",
+                  "palletName": "Staking",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0016832413-d71c3",
+                    "height": 16832413,
+                    "timestamp": "2023-02-28T11:19:12.000000Z",
+                    "specVersion": 9370
+                  },
+                  "extrinsic": {
+                    "id": "0016832413-000002-d71c3",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225612-000004-15a30",
+                  "callName": "contribute",
+                  "palletName": "Crowdloan",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0012225612-15a30",
+                    "height": 12225612,
+                    "timestamp": "2022-04-12T20:28:00.023000Z",
+                    "specVersion": 9180
+                  },
+                  "extrinsic": {
+                    "id": "0012225612-000004-15a30",
+                    "indexInBlock": 4
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225609-000002-a838f",
+                  "callName": "contribute",
+                  "palletName": "Crowdloan",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0012225609-a838f",
+                    "height": 12225609,
+                    "timestamp": "2022-04-12T20:27:42.009000Z",
+                    "specVersion": 9180
+                  },
+                  "extrinsic": {
+                    "id": "0012225609-000002-a838f",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225607-000002-49f5e",
+                  "callName": "contribute",
+                  "palletName": "Crowdloan",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0012225607-49f5e",
+                    "height": 12225607,
+                    "timestamp": "2022-04-12T20:27:30.033000Z",
+                    "specVersion": 9180
+                  },
+                  "extrinsic": {
+                    "id": "0012225607-000002-49f5e",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225602-000002-6dbdd",
+                  "callName": "contribute",
+                  "palletName": "Crowdloan",
+                  "success": true,
+                  "callerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "parentId": null,
+                  "block": {
+                    "id": "0012225602-6dbdd",
+                    "height": 12225602,
+                    "timestamp": "2022-04-12T20:27:00.016000Z",
+                    "specVersion": 9180
+                  },
+                  "extrinsic": {
+                    "id": "0012225602-000002-6dbdd",
+                    "indexInBlock": 2
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 76
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {\n\t\t\tcallsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidCallsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCallsConnection on CallsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "callerPublicKey_eq": "0x123456789"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "callsConnection": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-extrinsics-data.json b/test/e2e/fixtures/account-extrinsics-data.json
new file mode 100644
index 00000000..179a332c
--- /dev/null
+++ b/test/e2e/fixtures/account-extrinsics-data.json
@@ -0,0 +1,56 @@
+{
+  "itemsCount": "(52)",
+  "itemsTable": [
+    [
+      "19780727-2",
+      "Balances.transfer_keep_alive",
+      ""
+    ],
+    [
+      "18963360-6",
+      "XcmPallet.limited_teleport_assets",
+      ""
+    ],
+    [
+      "14994065-4",
+      "Balances.transfer_keep_alive",
+      ""
+    ],
+    [
+      "13127471-2",
+      "Utility.batch_all",
+      ""
+    ],
+    [
+      "13127388-2",
+      "Utility.batch_all",
+      ""
+    ],
+    [
+      "10189163-5",
+      "Crowdloan.contribute",
+      ""
+    ],
+    [
+      "10189151-4",
+      "Crowdloan.contribute",
+      ""
+    ],
+    [
+      "9838308-3",
+      "Crowdloan.contribute",
+      ""
+    ],
+    [
+      "9838296-2",
+      "Crowdloan.contribute",
+      ""
+    ],
+    [
+      "9838263-2",
+      "Crowdloan.contribute",
+      ""
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailsextrinsics error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-extrinsics-request.json b/test/e2e/fixtures/account-extrinsics-request.json
new file mode 100644
index 00000000..3d3de3e0
--- /dev/null
+++ b/test/e2e/fixtures/account-extrinsics-request.json
@@ -0,0 +1,586 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {\n\t\t\textrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "signerPublicKey_eq": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0019780727-000002-9c0ba",
+                  "extrinsicHash": "0xd63828eea567b31e8888412324b5b66011280d7c035f8d67fa1c919628321621",
+                  "block": {
+                    "id": "0019780727-9c0ba",
+                    "hash": "0x9c0ba9bba3fe4f0550b07790d9944a1a526dbdb5d93ca62bc8ba979d6d12f4a6",
+                    "height": 19780727,
+                    "timestamp": "2023-09-21T19:23:00.000000Z",
+                    "specVersion": 9430
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "531450037",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018963360-000006-41f61",
+                  "extrinsicHash": "0xd18c1618bfd1835f544ffeb72a223f9bbc13c631c61bd1abe28be385d67a387d",
+                  "block": {
+                    "id": "0018963360-41f61",
+                    "hash": "0x41f61baa19ae1de800145c73b69a8cab0a208ebc4c54095292799e98ee0b54a2",
+                    "height": 18963360,
+                    "timestamp": "2023-07-26T22:41:30.000000Z",
+                    "specVersion": 9430
+                  },
+                  "mainCall": {
+                    "callName": "limited_teleport_assets",
+                    "palletName": "XcmPallet"
+                  },
+                  "indexInBlock": 6,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "686158789",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0014994065-000004-1655d",
+                  "extrinsicHash": "0x8c19c389c81c914332351f609c2f86bf1181df447d9e1f4e31d7d5365048db7b",
+                  "block": {
+                    "id": "0014994065-1655d",
+                    "hash": "0x1655d20b4888fade17d06e62844c133442becf10d9201bdcdf45a8786d15dc24",
+                    "height": 14994065,
+                    "timestamp": "2022-10-22T13:34:06.011000Z",
+                    "specVersion": 9291
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "53260058",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127471-000002-b3d8d",
+                  "extrinsicHash": "0x4f3d1a839fb29c57f18fc7360a2c7ef50c864ed05bb9803eadb1fc35ec4d0dc1",
+                  "block": {
+                    "id": "0013127471-b3d8d",
+                    "hash": "0xb3d8d92f2c6b9fffc14657edaba3eb86f09cc37b87304dfb895b3acdf095a1c2",
+                    "height": 13127471,
+                    "timestamp": "2022-06-14T15:25:30.013000Z",
+                    "specVersion": 9230
+                  },
+                  "mainCall": {
+                    "callName": "batch_all",
+                    "palletName": "Utility"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": null,
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0013127388-000002-f6c26",
+                  "extrinsicHash": "0xf79e16d6016c4839adabe043254b67ae56f290fc3bfdd748eb94d412b452fbba",
+                  "block": {
+                    "id": "0013127388-f6c26",
+                    "hash": "0xf6c26a6aaec618ea0d23de61d0e0de7a111f9e4966562ade989eeb5189a87a06",
+                    "height": 13127388,
+                    "timestamp": "2022-06-14T15:17:12.018000Z",
+                    "specVersion": 9230
+                  },
+                  "mainCall": {
+                    "callName": "batch_all",
+                    "palletName": "Utility"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": null,
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0010189163-000005-0c224",
+                  "extrinsicHash": "0xef6825d4537deb4b9bc26046633a4f633f53a82c379c5028a7dca2dd2d0f1544",
+                  "block": {
+                    "id": "0010189163-0c224",
+                    "hash": "0x0c2246408ae4b919b5bb053368a40d60520405c67d0e81b454ddabf15391052f",
+                    "height": 10189163,
+                    "timestamp": "2021-11-21T09:40:42.009000Z",
+                    "specVersion": 9122
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 5,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332966",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0010189151-000004-9c042",
+                  "extrinsicHash": "0xcd0b10699846f1743367ba8d8abf6ccecb415a929b372533260f55040d2cafab",
+                  "block": {
+                    "id": "0010189151-9c042",
+                    "hash": "0x9c0429b97a96da97c92f862dc918f9c1fa5601df0db2ec27413bcdaffc0d008b",
+                    "height": 10189151,
+                    "timestamp": "2021-11-21T09:39:30.043000Z",
+                    "specVersion": 9122
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332966",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009838308-000003-0789b",
+                  "extrinsicHash": "0x2793bf2e0c3affd28248f2b9452dd556484004f24ec16c26e443005c59c88bb4",
+                  "block": {
+                    "id": "0009838308-0789b",
+                    "hash": "0x0789b314e2a27238057f00ab7c13faf55f2d4717434785c82217225612b32b68",
+                    "height": 9838308,
+                    "timestamp": "2021-10-27T15:12:42.017000Z",
+                    "specVersion": 9111
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 3,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332967",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009838296-000002-0151f",
+                  "extrinsicHash": "0x80f4ef3bdb04fa8b570cd5463a3bacfaa2e2a37f34f2ca705de52cb77f11f1cb",
+                  "block": {
+                    "id": "0009838296-0151f",
+                    "hash": "0x0151f078acd02c1c1ef476f1dd09cee698f6d92ad8ea5c6bedb5e398ec7dc550",
+                    "height": 9838296,
+                    "timestamp": "2021-10-27T15:11:30.009000Z",
+                    "specVersion": 9111
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332967",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009838263-000002-a5d9a",
+                  "extrinsicHash": "0xfe7a8665fdfd3969e98c1f8111b237bfc64c771a5343835f25e6b089cf42235f",
+                  "block": {
+                    "id": "0009838263-a5d9a",
+                    "hash": "0xa5d9af1fc14d50d48f123fbd227cca218c14191be5f76a09bc71bddd4e2d7b6c",
+                    "height": 9838263,
+                    "timestamp": "2021-10-27T15:08:06.007000Z",
+                    "specVersion": 9111
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332967",
+                  "signerPublicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840",
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 52
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {\n\t\t\textrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "signerPublicKey_eq": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0016832516-000002-74481",
+                  "extrinsicHash": "0xeadb8fcc3c8efcc68cbd4721827cdb9abf4ac138e05099fec88da446983c91ad",
+                  "block": {
+                    "id": "0016832516-74481",
+                    "hash": "0x74481e67626c7b12c762bdb1cd8035d518701bb9c09bacc0802f285c998d2adf",
+                    "height": 16832516,
+                    "timestamp": "2023-02-28T11:29:30.001000Z",
+                    "specVersion": 9370
+                  },
+                  "mainCall": {
+                    "callName": "validate",
+                    "palletName": "Staking"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "435920509",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832478-000002-d3414",
+                  "extrinsicHash": "0x6c3ae7b357a0660b1c01a9db1fb16cdb30c6964d4034c88d9d79f9c50ff8dd16",
+                  "block": {
+                    "id": "0016832478-d3414",
+                    "hash": "0xd34140fb5841dabca898b1670d14ae1f52fd81e724e73ac98b53f59acda53896",
+                    "height": 16832478,
+                    "timestamp": "2023-02-28T11:25:42.001000Z",
+                    "specVersion": 9370
+                  },
+                  "mainCall": {
+                    "callName": "batch_all",
+                    "palletName": "Utility"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "1292784915",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0016832413-000002-d71c3",
+                  "extrinsicHash": "0x3ff79a72f0451b0096fdbb0e80c5bad9e95cbdc517682954e26fc2a857b47e78",
+                  "block": {
+                    "id": "0016832413-d71c3",
+                    "hash": "0xd71c3ab7256fadd675fdbdac9cf9230e9dcc4f5586fcb44ea30eb8632cf306af",
+                    "height": 16832413,
+                    "timestamp": "2023-02-28T11:19:12.000000Z",
+                    "specVersion": 9370
+                  },
+                  "mainCall": {
+                    "callName": "withdraw_unbonded",
+                    "palletName": "Staking"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "466739504",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225612-000004-15a30",
+                  "extrinsicHash": "0x6d46c4abf2ffe814f2c1fb468501e8752cf915491ba4d7ab2fbb8d2a60da46ce",
+                  "block": {
+                    "id": "0012225612-15a30",
+                    "hash": "0x15a3057a73dbece392f2cbf4025f776972af7e79b986cb4f4621ccf303601a31",
+                    "height": 12225612,
+                    "timestamp": "2022-04-12T20:28:00.023000Z",
+                    "specVersion": 9180
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "41999636",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225609-000002-a838f",
+                  "extrinsicHash": "0x129cf15323614e2415163c69054a717ff8a9e74b95d96fb5a3664e02ade74352",
+                  "block": {
+                    "id": "0012225609-a838f",
+                    "hash": "0xa838f40c2e84740df2d57d0969c386982a9cfa8d50cacba2979fe64d3d8ac7d5",
+                    "height": 12225609,
+                    "timestamp": "2022-04-12T20:27:42.009000Z",
+                    "specVersion": 9180
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "41999636",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225607-000002-49f5e",
+                  "extrinsicHash": "0xa5fb21b6904d705d319ed068203651e371a6354c3e2ece1561cf2bac567f6a9c",
+                  "block": {
+                    "id": "0012225607-49f5e",
+                    "hash": "0x49f5e246d028249a13a06c0db3e0b44e8727a8d0bd1ca619c3ba64aa5b141aef",
+                    "height": 12225607,
+                    "timestamp": "2022-04-12T20:27:30.033000Z",
+                    "specVersion": 9180
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "41999636",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0012225602-000002-6dbdd",
+                  "extrinsicHash": "0x7d784a145f8ef314c0ea0bc5b97f6fe1f4c9eb31900e5dc252bc7e6a305f358e",
+                  "block": {
+                    "id": "0012225602-6dbdd",
+                    "hash": "0x6dbdd6eec1246578c64c339b6380a65fc8b051812dcb995c57666a63edb61a26",
+                    "height": 12225602,
+                    "timestamp": "2022-04-12T20:27:00.016000Z",
+                    "specVersion": 9180
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "42332966",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009657471-000002-db70c",
+                  "extrinsicHash": "0x928b76d1d9bff5f72c17da106e135db7a8307c2851cffe2cb0dd93b67530ec45",
+                  "block": {
+                    "id": "0009657471-db70c",
+                    "hash": "0xdb70c26a605cdcfcfea1b305a93a46682005a7d54d8274ac0b9f38ca2a210322",
+                    "height": 9657471,
+                    "timestamp": "2021-10-14T22:06:12.024000Z",
+                    "specVersion": 9111
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "51999517",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009657455-000002-20193",
+                  "extrinsicHash": "0xb4336755a89576c74bd359675d97088ecc2495e3a329befb1316d43a60126472",
+                  "block": {
+                    "id": "0009657455-20193",
+                    "hash": "0x2019322a4550fbd5efc880bf77289b76b2cc5efb59a690ed27865a0e66538cc3",
+                    "height": 9657455,
+                    "timestamp": "2021-10-14T22:04:30.008000Z",
+                    "specVersion": 9111
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "41999637",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0009153897-000004-44ecd",
+                  "extrinsicHash": "0x43c1e96c14f9f1686289477d3ca1e92e7813604f0de17e57865bdd44bbff2792",
+                  "block": {
+                    "id": "0009153897-44ecd",
+                    "hash": "0x44ecda4596d85768b5d9cbd1f1b048c7ac8318981ed441599d0a00f809afd82f",
+                    "height": 9153897,
+                    "timestamp": "2021-09-09T18:49:36.699000Z",
+                    "specVersion": 9090
+                  },
+                  "mainCall": {
+                    "callName": "contribute",
+                    "palletName": "Crowdloan"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": null,
+                  "fee": "42332966",
+                  "signerPublicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737",
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 56
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {\n\t\t\textrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "signerPublicKey_eq": "0x123456789"
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsConnection": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-identity-data.json b/test/e2e/fixtures/account-identity-data.json
new file mode 100644
index 00000000..79a4d849
--- /dev/null
+++ b/test/e2e/fixtures/account-identity-data.json
@@ -0,0 +1,9 @@
+{
+  "header": "Account SPACE",
+  "identityInfo": [
+    "NASA",
+    "https://nasa.gov",
+    "info@nasa.gov",
+    "@NASA"
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-info-data.json b/test/e2e/fixtures/account-info-data.json
new file mode 100644
index 00000000..0bb32738
--- /dev/null
+++ b/test/e2e/fixtures/account-info-data.json
@@ -0,0 +1,25 @@
+{
+  "header": "Account Fabi 🐒",
+  "infoTable": [
+    [
+      "Network",
+      "Kusama"
+    ],
+    [
+      "Kusama address",
+      "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE"
+    ],
+    [
+      "Substrate address",
+      "5Fq7vdZQCQg51vEryiF7B9Hs8DP4geiLAqL9syy9KGzbMpG6"
+    ],
+    [
+      "Public key",
+      "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+    ]
+  ],
+  "errorHeader": "Account GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE",
+  "error": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsAccount error",
+  "invalidAddressHeader": "Account 0x123456789",
+  "invalidAddressError": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsInvalid account address"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-info-request.json b/test/e2e/fixtures/account-info-request.json
new file mode 100644
index 00000000..4560529f
--- /dev/null
+++ b/test/e2e/fixtures/account-info-request.json
@@ -0,0 +1,30 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-main-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($id: String!) {\n\t\t\tidentity: identityById(id: $id) {\n\t\t\t\tid\n\t\t\t\tdisplay\n\t\t\t\tlegal\n\t\t\t\tweb\n\t\t\t\temail\n\t\t\t\ttwitter\n\t\t\t\triot\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "id": "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "identity": {
+            "id": "GLjawuGpmgzma4JkR4A56esGofJVKXWdDAuGeF6o5D66wGE",
+            "display": "Fabi 🐒",
+            "legal": null,
+            "web": null,
+            "email": null,
+            "twitter": "@fabiangompf",
+            "riot": null
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-portfolio-data.json b/test/e2e/fixtures/account-portfolio-data.json
new file mode 100644
index 00000000..d93c9ee6
--- /dev/null
+++ b/test/e2e/fixtures/account-portfolio-data.json
@@ -0,0 +1,6 @@
+{
+  "total": "Total$46,500.47",
+  "free": "Free$45,602.63",
+  "reserved": "Reserved$897.84",
+  "notFound": "No positive balances with conversion rate to USD found"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-transfers-data.json b/test/e2e/fixtures/account-transfers-data.json
new file mode 100644
index 00000000..1b4f3eab
--- /dev/null
+++ b/test/e2e/fixtures/account-transfers-data.json
@@ -0,0 +1,86 @@
+{
+  "itemsCount": "(61)",
+  "itemsTable": [
+    [
+      "19780727-40",
+      "GLjawu...D66wGE",
+      "FFzCmq...5BFsrd",
+      "1,030 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "15120624-679",
+      "F3opxR...SHPWTG",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "15120552-845",
+      "F3opxR...gpr2P7",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "15120516-198",
+      "F3opxR...wCU1XP",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "15120391-917",
+      "F3opxR...gezyQE",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "14994065-48",
+      "GLjawu...D66wGE",
+      "FFzCmq...5BFsrd",
+      "3,900 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "13910738-826",
+      "F3opxR...pGRMag",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "13910688-742",
+      "F3opxR...wNJhRu",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "13910676-400",
+      "F3opxR...wY9r8w",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ],
+    [
+      "13910640-387",
+      "F3opxR...STEPj1",
+      "GLjawu...D66wGE",
+      "250 KSM",
+      "Success",
+      ""
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailstransfers error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/account-transfers-request.json b/test/e2e/fixtures/account-transfers-request.json
new file mode 100644
index 00000000..6a192bb7
--- /dev/null
+++ b/test/e2e/fixtures/account-transfers-request.json
@@ -0,0 +1,572 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-main-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: TransferWhereInput, $order: [TransferOrderByInput!]!) {\n\t\t\ttransfersConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...MainSquidTransfersConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment MainSquidTransfersConnection on TransfersConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...MainSquidTransfer\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment MainSquidTransfer on Transfer {\n\t\t\t\n\tid\n\tdirection\n\taccount {\n\t\tpublicKey\n\t}\n\ttransfer {\n\t\tid\n\t\tblockNumber\n\t\ttimestamp\n\t\textrinsicHash\n\t\tto {\n\t\t\tpublicKey\n\t\t}\n\t\tfrom {\n\t\t\tpublicKey\n\t\t}\n\t\tamount\n\t\tsuccess\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "account": {
+              "publicKey_eq": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+            }
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "transfersConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0019780727-000040-9c0ba-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0019780727-000040-9c0ba",
+                    "blockNumber": 19780727,
+                    "timestamp": "2023-09-21T19:23:00.000000Z",
+                    "extrinsicHash": "0xd63828eea567b31e8888412324b5b66011280d7c035f8d67fa1c919628321621",
+                    "to": {
+                      "publicKey": "0x76b94432fd5d47fb05347563cd63880f24e1e425b9da4b457ceff9afc852aa14"
+                    },
+                    "from": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "amount": "1030000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0015120624-000679-84900-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0015120624-000679-84900",
+                    "blockNumber": 15120624,
+                    "timestamp": "2022-10-31T08:45:24.015000Z",
+                    "extrinsicHash": "0xb341435a91916c081473b7941a14b4f04e26ccfc891f5b9b70b5fb7ee587b640",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642700000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0015120552-000845-f8081-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0015120552-000845-f8081",
+                    "blockNumber": 15120552,
+                    "timestamp": "2022-10-31T08:38:12.015000Z",
+                    "extrinsicHash": "0x6149072afd71baee16540a364097762fb648db623437434f7ae8eaab53d176c6",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642500000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0015120516-000198-cf19c-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0015120516-000198-cf19c",
+                    "blockNumber": 15120516,
+                    "timestamp": "2022-10-31T08:34:36.027000Z",
+                    "extrinsicHash": "0xfbaf0820702c9e97037cf5a5b34c51d08d902dd8a5a47d619877c5472e09c254",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642b00000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0015120391-000917-fe3a0-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0015120391-000917-fe3a0",
+                    "blockNumber": 15120391,
+                    "timestamp": "2022-10-31T08:22:06.010000Z",
+                    "extrinsicHash": "0x6ccab320cbfc314b8412eec04da8ed93337e06ebdee07b908d7b1ff0d785c3bf",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642d00000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0014994065-000048-1655d-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0014994065-000048-1655d",
+                    "blockNumber": 14994065,
+                    "timestamp": "2022-10-22T13:34:06.011000Z",
+                    "extrinsicHash": "0x8c19c389c81c914332351f609c2f86bf1181df447d9e1f4e31d7d5365048db7b",
+                    "to": {
+                      "publicKey": "0x76b94432fd5d47fb05347563cd63880f24e1e425b9da4b457ceff9afc852aa14"
+                    },
+                    "from": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "amount": "3900000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910738-000826-96268-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0013910738-000826-96268",
+                    "blockNumber": 13910738,
+                    "timestamp": "2022-08-08T02:40:00.008000Z",
+                    "extrinsicHash": "0x2c50856b554f556bc7c8d42a931efe64d5bcc0664ed13421e03f4b2c2041afed",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641c00000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910688-000742-b4cd2-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0013910688-000742-b4cd2",
+                    "blockNumber": 13910688,
+                    "timestamp": "2022-08-08T02:35:00.015000Z",
+                    "extrinsicHash": "0x72a5916b90de7a4b5e2eec2755579d1c9c8afe19f52e214f2b9cfe691d678083",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642300000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910676-000400-28d9f-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0013910676-000400-28d9f",
+                    "blockNumber": 13910676,
+                    "timestamp": "2022-08-08T02:33:42.015000Z",
+                    "extrinsicHash": "0xdc2596d852b0dfd2ff581ccf2e1e0903b9184c5e2e60c074c4a40d77bcb46094",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641b00000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910640-000387-f3c00-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                  },
+                  "transfer": {
+                    "id": "0013910640-000387-f3c00",
+                    "blockNumber": 13910640,
+                    "timestamp": "2022-08-08T02:30:06.040000Z",
+                    "extrinsicHash": "0x7afffe22d93bf83ab0b4f0b074935a2d1ee5e713f6a14a4b30c8ac354f8187b0",
+                    "to": {
+                      "publicKey": "0xa69484f2b10ec2f1dea19394423d576f91c6b5ab2315b389f4e108bcf0aa2840"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641f00000000000000000000000000000000000000"
+                    },
+                    "amount": "250000000000000",
+                    "success": true
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 61
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-main-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: TransferWhereInput, $order: [TransferOrderByInput!]!) {\n\t\t\ttransfersConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...MainSquidTransfersConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment MainSquidTransfersConnection on TransfersConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...MainSquidTransfer\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment MainSquidTransfer on Transfer {\n\t\t\t\n\tid\n\tdirection\n\taccount {\n\t\tpublicKey\n\t}\n\ttransfer {\n\t\tid\n\t\tblockNumber\n\t\ttimestamp\n\t\textrinsicHash\n\t\tto {\n\t\t\tpublicKey\n\t\t}\n\t\tfrom {\n\t\t\tpublicKey\n\t\t}\n\t\tamount\n\t\tsuccess\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "account": {
+              "publicKey_eq": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+            }
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "transfersConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018144337-000328-618e0-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0018144337-000328-618e0",
+                    "blockNumber": 18144337,
+                    "timestamp": "2023-05-30T22:59:30.000000Z",
+                    "extrinsicHash": "0x2fffb606e82b8b259514dfaaf71152ee15711e481d5abd8058e3fc62e49d864b",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e644900000000000000000000000000000000000000"
+                    },
+                    "amount": "1000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910626-000968-a5e23-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910626-000968-a5e23",
+                    "blockNumber": 13910626,
+                    "timestamp": "2022-08-08T02:28:42.005000Z",
+                    "extrinsicHash": "0x9c99a46ded3ff8ebeffe6b20187ef2a377b1edbb7dce8f2f96f2b1062299b11d",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641b00000000000000000000000000000000000000"
+                    },
+                    "amount": "25000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910555-000319-3d885-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910555-000319-3d885",
+                    "blockNumber": 13910555,
+                    "timestamp": "2022-08-08T02:21:36.017000Z",
+                    "extrinsicHash": "0x961adf302be0ff78adfa39d58a0e19f3970e2eec3fa7c8105b0521a2e776f191",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641c00000000000000000000000000000000000000"
+                    },
+                    "amount": "1000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910545-000737-a124e-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910545-000737-a124e",
+                    "blockNumber": 13910545,
+                    "timestamp": "2022-08-08T02:20:36.008000Z",
+                    "extrinsicHash": "0xb416664844ae36fffb8d93a55f3010438a11330903715d34efd7dd7394337d1e",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642300000000000000000000000000000000000000"
+                    },
+                    "amount": "20000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910496-000538-d47c5-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910496-000538-d47c5",
+                    "blockNumber": 13910496,
+                    "timestamp": "2022-08-08T02:15:42.022000Z",
+                    "extrinsicHash": "0x5ce3450aedab0f28c2961b67f57989144b1683f98e339ddb717dff69241a0077",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641f00000000000000000000000000000000000000"
+                    },
+                    "amount": "10000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910476-000527-3aa85-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910476-000527-3aa85",
+                    "blockNumber": 13910476,
+                    "timestamp": "2022-08-08T02:13:36.027000Z",
+                    "extrinsicHash": "0xa1c6ace8c45a2202e9e03fb66335672547435fdd2a0e7ee435e5647c495a064c",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e642200000000000000000000000000000000000000"
+                    },
+                    "amount": "2000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0013910438-000524-da6f3-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0013910438-000524-da6f3",
+                    "blockNumber": 13910438,
+                    "timestamp": "2022-08-08T02:09:48.015000Z",
+                    "extrinsicHash": "0x58d60a9a4f5abdc053033e9f54f25aa3722c125307b37628807c76671bd0ce1c",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e641900000000000000000000000000000000000000"
+                    },
+                    "amount": "25000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012703541-000144-c201f-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0012703541-000144-c201f",
+                    "blockNumber": 12703541,
+                    "timestamp": "2022-05-16T03:05:00.039000Z",
+                    "extrinsicHash": "0x1446caa9029183fbf09da1615354cf0ef523954e89a317b04fb241f888688526",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e644800000000000000000000000000000000000000"
+                    },
+                    "amount": "21000000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012700812-000523-cfd1f-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0012700812-000523-cfd1f",
+                    "blockNumber": 12700812,
+                    "timestamp": "2022-05-15T22:31:26.039000Z",
+                    "extrinsicHash": "0x465868668838db42750bf2d80e1d8128327d52a758c9f0b7ca0afac6a076e47d",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e640100000000000000000000000000000000000000"
+                    },
+                    "amount": "98400000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0012700809-000939-5bd22-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                  },
+                  "transfer": {
+                    "id": "0012700809-000939-5bd22",
+                    "blockNumber": 12700809,
+                    "timestamp": "2022-05-15T22:30:54.037000Z",
+                    "extrinsicHash": "0xbd19c45c6206e82989c08186cdb250a4364e1fd1f343f4cceea2834cb687be56",
+                    "to": {
+                      "publicKey": "0x4ea378f0cd9285451e51e00c2e68851a57a36662990baa9226ab5c7734e05737"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6366756e640200000000000000000000000000000000000000"
+                    },
+                    "amount": "23100000000000",
+                    "success": true
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 57
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-main-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: TransferWhereInput, $order: [TransferOrderByInput!]!) {\n\t\t\ttransfersConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...MainSquidTransfersConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment MainSquidTransfersConnection on TransfersConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...MainSquidTransfer\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment MainSquidTransfer on Transfer {\n\t\t\t\n\tid\n\tdirection\n\taccount {\n\t\tpublicKey\n\t}\n\ttransfer {\n\t\tid\n\t\tblockNumber\n\t\ttimestamp\n\t\textrinsicHash\n\t\tto {\n\t\t\tpublicKey\n\t\t}\n\t\tfrom {\n\t\t\tpublicKey\n\t\t}\n\t\tamount\n\t\tsuccess\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "account": {
+              "publicKey_eq": "0x123456789"
+            }
+          },
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "transfersConnection": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-calls-data.json b/test/e2e/fixtures/block-calls-data.json
new file mode 100644
index 00000000..f531008f
--- /dev/null
+++ b/test/e2e/fixtures/block-calls-data.json
@@ -0,0 +1,48 @@
+{
+  "itemsCount": "(7)",
+  "itemsTable": [
+    [
+      "18278717-0",
+      "Timestamp.set",
+      "",
+      "18278717-0"
+    ],
+    [
+      "18278717-1",
+      "ParaInherent.enter",
+      "",
+      "18278717-1"
+    ],
+    [
+      "18278717-2",
+      "Balances.transfer_keep_alive",
+      "129fZm...cbTEwb",
+      "18278717-2"
+    ],
+    [
+      "18278717-3",
+      "Utility.batch_all",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-1",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-2",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-3",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailscalls error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-calls-request.json b/test/e2e/fixtures/block-calls-request.json
new file mode 100644
index 00000000..ae60ead9
--- /dev/null
+++ b/test/e2e/fixtures/block-calls-request.json
@@ -0,0 +1,179 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {\n\t\t\tcallsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidCallsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCallsConnection on CallsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "block": {
+              "id_eq": "0018278717-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "callsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000000-673df",
+                  "callName": "set",
+                  "palletName": "Timestamp",
+                  "success": true,
+                  "callerPublicKey": null,
+                  "parentId": null,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000000-673df",
+                    "indexInBlock": 0
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000001-673df",
+                  "callName": "enter",
+                  "palletName": "ParaInherent",
+                  "success": true,
+                  "callerPublicKey": null,
+                  "parentId": null,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df",
+                    "indexInBlock": 1
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000002-673df",
+                  "callName": "transfer_keep_alive",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x32d804aff686f512841f7f31b7091a31d41fcc5aa89a4eed8d2d2705b62517fe",
+                  "parentId": null,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000002-673df",
+                    "indexInBlock": 2
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df",
+                  "callName": "batch_all",
+                  "palletName": "Utility",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": null,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000001",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000002",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000003",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "7",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 7
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-events-data.json b/test/e2e/fixtures/block-events-data.json
new file mode 100644
index 00000000..365c24a6
--- /dev/null
+++ b/test/e2e/fixtures/block-events-data.json
@@ -0,0 +1,66 @@
+{
+  "itemsCount": "(68)",
+  "itemsTable": [
+    [
+      "18278717-0",
+      "Treasury.UpdatedInactive",
+      "",
+      "Parsed\nRaw\ndeactivated\n\t\n446877210177312973\n\n\nreactivated\n\t\n446877210048143243"
+    ],
+    [
+      "18278717-1",
+      "System.ExtrinsicSuccess",
+      "18278717-0",
+      "Parsed\nRaw\ndispatchInfo\n\t\nclass\n\t\nMandatory\n\t\n\n\npaysFee\n\t\nYes\n\t\n\n\nweight\n\t\nproofSize\n\t\n1493\n\n\nrefTime\n\t\n242610000"
+    ],
+    [
+      "18278717-2",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x7e91e2867e25a0d734fb082125f6f27860671274ba60c311ed26b51f5840288b\n\n\ndescriptor\n\t\ncollator\n\t\n0xa0e96b29fd51b155bbc2d7b1f4a8f88c4bdb7431414ab7736d386e47b1678c31\n\n\nerasureRoot\n\t\n0xec000d9010232e19a616f31436b7e14f2da569b19f2f0e50fa34872c3a54e9b3\n\n\nparaHead\n\t\n0x45e00a49ce98c354aaa4feb3f5a12be69969e5fd678d9ca2e4e711a4a91c5b93\n\n\nparaId\n\t\n2013\n\n\npersistedValidationDataHash\n\t\n0x73fbb7cb1f5090698e21bf17daed395de3a5ae7606bf693d8dee9fc4919f361b\n\n\npovHash\n\t\n0xf38f541fc459be775e21c7638b9e406d92271c7ab1d8b812d4d0d11be2c0e714\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0xeaa4f377c4a523307eed554ed0044b4e81b1a131f644a7e242434f6cada456175d0e10da2300f0c1d6595b9dc206d3e696e128c9bab055d4730a48a5c4ff718d\n\n\nvalidationCodeHash\n\t\n0x8a155e1e06a00c28bd7beca09ac6a5ae143461c54658f2a436ba5c231e2acb89\n\n\n1\n\t\n0xff66cccf881ad9721264fe8cecfcccba2e3b1f0c78723469d44bdf30ef78120e7a08e1005e07d5d41470a43a8c9bcd4090feb0b0d1241c8f438b657d279f2a95fd7617f58e0b58714fe46f57289e8e713da76b22cf1ab99b153a82d136d3951e6b6247e808066175726120bf7e72080000000005617572610101ce36e7fc3275fd126a2a23d64d49e11e8116802a686846c9eda435a7a0c561789682126fdfb04a1cd34bba2dc5746e9b176544276dc73ff36b7b4e5aeccb9085\n\n\n2\n\t\n10\n\n\n3\n\t\n49"
+    ],
+    [
+      "18278717-3",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x897d3702c508ad5b08f0038527aefdc9d2104c3809cc17900f02c86c0e2e04d6\n\n\ndescriptor\n\t\ncollator\n\t\n0x981fb56c96bf26fe5144470fbc5c4db558443abcf45ced6e35ff9ea157792a77\n\n\nerasureRoot\n\t\n0x51941be5d44524c1146aad1fae6cda7a28483ef314bf724b2486d3c1c0fdd4d9\n\n\nparaHead\n\t\n0xfde39ab14d327be8dae118db4fda4093a11ed81703506cce448c9fb48d2954ec\n\n\nparaId\n\t\n2019\n\n\npersistedValidationDataHash\n\t\n0xe8769f2a88a0eda61827b595c921c79f228b9ba1253719276d4109ecc2ae339a\n\n\npovHash\n\t\n0x891499bcb47111ef4e8f74fb019a3ddebaf458c82fbb62c9b163500864118ceb\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0x8ab964900ca31df06395149c6d03a13a282877e508876682401afe3a8324504708d3e0bab60e3004477d22941d0b6f35d4cd89dc6d9331d696ebceab42ca188d\n\n\nvalidationCodeHash\n\t\n0xeb5e2b85a4a09e8022ca81daa72eb50f99c41213d7a8164df08a02af6ae76f06\n\n\n1\n\t\n0xd534f9ae50913b527e1447535eb4357cf664b6433657074fd236f1cecf957fc29a17ce00d7046565720f3024c552439e25e53b364f9e57dc41429197548fb4d69441383b9bce6ba7e93f7e3646156eae2839fe13defe44defd2ec2204aa3d773252d3af00c066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b04056175726101011e89aa0f520e8a8cfbbaf2cb8e696dba23233988e474e85be27dcd82a7434348ff32ae683110219a8fb03113eb7f898021b764238f448e84d426baee0b0ed785\n\n\n2\n\t\n11\n\n\n3\n\t\n50"
+    ],
+    [
+      "18278717-4",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x662279a8a85a5a87db3d86065fe6fe9841fde0b48093fed170c0841c560b1a46\n\n\ndescriptor\n\t\ncollator\n\t\n0xcaa1e970d70740cafb28a7a73969a5d9bbedea565bd1ef26065a34da36336e01\n\n\nerasureRoot\n\t\n0x957690cc9774808d2d8aee732d629a4a2924d94879124570112f11088bf8ec4d\n\n\nparaHead\n\t\n0x86063603ea4f00fd355da4f4be4c77291e4ab4358983fc3c63a42c92ed899d3f\n\n\nparaId\n\t\n2037\n\n\npersistedValidationDataHash\n\t\n0x6246a8b3e2c6ec4abc2b1d5afe3374d27943201d32b6dc7fc46b0d939c5913d9\n\n\npovHash\n\t\n0x421c841bf375f01068eb3c41f18d054a6f172bf44de0ae64aacf6d131d4ba950\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0xa251b42a4bce95c5e26b47710b1cfa859216b7ae4a963dd160445cdb234942460bd1d1a5edfb1cb2efdc6350f58f84e72952c0fa84f76f07ee553ceafde98184\n\n\nvalidationCodeHash\n\t\n0x8bd754a6cdd7b4f24ca6c9296baee19418f3eeb0182ed844fe24f544d3f34942\n\n\n1\n\t\n0x3df890e1cbb3fb7a4392cb57dacfdb57c8f4a692e34d9ec3995dc27c57d1eded4247e300b1fe0b930c2b21410f6f2d80799a4070554ec490d8276833b956ca57dffe9bed8aa394691375d51b32c00de793e2f3de464e4d6cb8268b20c328c5258673379610066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b040466726f6e8801b1c41685b7d044297666912a021acd018c3d2afb96c5de0ef39d7d3951c29f1700056175726101016e30e76665d6f9389211f22e825c047907e383e3a5831c846bfc6a5820682764e7ca51e8b5ad151c94814d65400d0e88036960c3db1e1fecca833c3c07dac58a\n\n\n2\n\t\n20\n\n\n3\n\t\n0"
+    ],
+    [
+      "18278717-5",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x5ee585e5f3bf8585f2f27cb435dfcf3a9dc902623014625f35d8f755411d30fc\n\n\ndescriptor\n\t\ncollator\n\t\n0xa02e6772857e9cc189b447a314f8b99121235088ca731ec83947765636a8ec2e\n\n\nerasureRoot\n\t\n0x92d1e0b0e6fd3df53374729fae5c2a99f18ba29c57cb6c6cce21914aead03856\n\n\nparaHead\n\t\n0x05f07dde217c78b31cc9a5429fad9fb165793527a3abdc0057b1825d549c2740\n\n\nparaId\n\t\n2043\n\n\npersistedValidationDataHash\n\t\n0x5a58a7cdb7838c8d26720f71a01e68f303e2bd4b166d65462e2ce63c48aa8b38\n\n\npovHash\n\t\n0xf2ff1d267bfced08e29ded8bd44fbc72b6ca97a4588b83b22ce0922bf90ced01\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0x9899be1b69e0a72ee949ae618665878364b6893e74d0869e228367384ecd884eed5250b3725939701ff2f4deda5adbbb92c57840069f11de644805e366aebe8a\n\n\nvalidationCodeHash\n\t\n0xc7f62a3b792962188d29434c701695fac145be19180c6121beac2e168c7dba89\n\n\n1\n\t\n0xf39a06bcfc859696dd94385ae02c2009a3a2eeefa0ad129bc671ef8fa1b61c7fc63be40037785dced27d5142995bbf69fec6d7aeec2785296f69c510af816fad843683361ca34f6b83bc57f01a38b998c1eb88e121ca58129c86a5ac321b5ece0718d8280c066175726120bf7e7208000000000466726f6e0907014a4077cd769243c8fed991de233ea869b07fe66acf2e5e8c7b8d42ed63a5f6e734f1aa46b606c2daea5bf6010e186ee4d8ba3d40518c257dec8872d4e7080441cbd224233873551c90baee9920fa2c55c7b21ddfdd1d3c2f9d26df2dab470610e1278835607e9c7d1d1c3c5dd7d0ecbc97cad0ff003853cbddc0b7f804a924fa0ccc302e7664c61565202016752209169430782e8eb231e510b5c0a126c40aab284632636999f9494da2e44d1b04b56646c6fe58df7c05009d847e48cd620c3987a6b2f722b7bd27d299673bf7c3f518753aee81271180fa6faa5ec9040e8083c6141b7e2ea20eec4f1b5f08073caed6f3381e0850ce0582825e012169365fc5265d5b4019aac441402a2d756e9afba30688c9ca134eb3126f692a3b154e55640c1b7b9c70b3d99dccae3d7b93148c2f97ffde68348c4576a6cf4d7a2fdb05a744bf8b0071b025b6424e0163411dccaad2205b9384b297dd736f01c4bc36a9b6cd6ccc529b60d4b9b48979e0db7eb7da4d8a55e90417c45a0e3b27f8b1ac54437f3e1786410516f8075fd3eea08e7193318ed0790e3a38209fa063a665caca2b6cc6b50bdf939c97ba4512c65ee2458e1211772330babadc66adfae287f8ee1c62056175726101019881e1e2395e37b11b743b7fb4e1f81a3593afdc1508c1d7d1506293b932cc0f4e28ccf52958bf3c3d91bf7c8e7185f9d4810fe97e40c9598a6981625cc44382\n\n\n2\n\t\n23\n\n\n3\n\t\n3"
+    ],
+    [
+      "18278717-6",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x9a545aa8c75adb509a5422301ac9e8bc06455eeba14aea9328590d1632fa6377\n\n\ndescriptor\n\t\ncollator\n\t\n0x604bd22fc4ec65f712bfd5c6044181fb483054bef62fc927ddf21f31d4bc736f\n\n\nerasureRoot\n\t\n0x20dcd9305a5c1703bc46539b051b5d87ea03c3b087637da82a2cb223c1a7f63d\n\n\nparaHead\n\t\n0xda00e6eddc79ce55d25215004673589fe54d13423f15d8c220bfefd9ae959c3a\n\n\nparaId\n\t\n2056\n\n\npersistedValidationDataHash\n\t\n0xba637331ac48b67ec37a227cfbed27fa28bd93934f8bd2abb4c1b69eb219ef18\n\n\npovHash\n\t\n0x0e1c939df4152035e7a8ad88591a27394b2ad230d83e0610720502cd495f6040\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0xdca00778084d9b2667988357f73dc988cc993c1a94b8ab9889aaf34c882e676dbc93bf69aa5c66a084fb567dd81592c216c3752ee798eab27f47979267ef0483\n\n\nvalidationCodeHash\n\t\n0xfea7101fc0254e4e0ddd3afe1901e01e476dddc0d1b4e3224caf9519e3a712c0\n\n\n1\n\t\n0x3153bcaa5b204b1b806749092304a098aa362de4b4a38251a03bb2fdbbf998c76229960056840f726db54e1586b78a95bf122f1bd76ad497aff34f54f3930c28c6c611304e494488cbca412700e841bbb5bdaa96913fd719298236f7de3704b7c09b0d8308066175726120bf7e72080000000005617572610101587292b949807cbd7e634af36e05ae1cceca51b9170f320f73d559072ee665395e8c833eec8f2c542f424d42ba22946d524aa0714d1793bdb41e38e5d8d9868e\n\n\n2\n\t\n30\n\n\n3\n\t\n10"
+    ],
+    [
+      "18278717-7",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x76e73ec529c175ed67a4dfaf49489ea85426e817cc434ce1e39a519aa7c36147\n\n\ndescriptor\n\t\ncollator\n\t\n0x8c53245207e4c4335d4e8e5065a9798f09e1a6e3a7dbe4f859a0ab21f85a2c40\n\n\nerasureRoot\n\t\n0xc68d3b8393e9c0341d996d0397cb4b030848bcad78b9f3c2fb1ad2cb918ac97b\n\n\nparaHead\n\t\n0x7a195a6c13fcbbfa24aaf8651b6c16c8c7f5bcca3ec186e4331b05bb8dd4f56d\n\n\nparaId\n\t\n2091\n\n\npersistedValidationDataHash\n\t\n0x16b1fae47a051d95a03061d1bac0c4ffa12acebf759438ba5a91f46f4485f6a1\n\n\npovHash\n\t\n0x642cc7406ef7418c761477c2c9bcbde506e2146b1bc49dccffbf6594313e7403\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0x4220b3765a9dcb11e32ed9b622c5be1c181315561a0bbfdcf74964528893b20f87eb783b2941b367fde188fe836fad47815de1632135440b573b16c76bf59b82\n\n\nvalidationCodeHash\n\t\n0xca4d75ad8d9bbcd9b399a812fddaeda403b7564341bdd2a0e9b3d213fee9dfec\n\n\n1\n\t\n0x9f02990f0d8dcd2e267fa6ae81bc9a5359d9e567f61863f331eb7c119024e127821c9b00843bffcd039edd13aaf478995d8346bbf26d46940805a1c085964f74350d70e9e54e037e8027df3a1af245c9d4d3ae8f02d03d4ec2db8a57fceb3bf476a2774a0c066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b04056175726101017a000950ad4cd67db36e019779afb476921c0a1ee8e3cfedb36b84c1cc54c401b97b5e4952a27a7171ae13e10a297843a6d183adf87717de7ccf25ae18279082\n\n\n2\n\t\n34\n\n\n3\n\t\n14"
+    ],
+    [
+      "18278717-8",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0xb6059fb91716d2ca6389658d3400410e5810c18dbea0a8657bcbd18b9f234372\n\n\ndescriptor\n\t\ncollator\n\t\n0xe836d2c36c647056f8911eb0efd0433dde7ff8105cfb2ce3c8191a0a3c544c23\n\n\nerasureRoot\n\t\n0x017b83ce31a1bf41fbfb84a6caea7453b3bb663405edca5a20194789d99ba849\n\n\nparaHead\n\t\n0x5c4662df2ee9925f7a8a0d83ca2ddbc12eab10302741b31870385b98d70c69a8\n\n\nparaId\n\t\n2094\n\n\npersistedValidationDataHash\n\t\n0x2772157e26e6dd3c2f5585fff6fc35fc43dd61966bb2f493f850f81d34312ead\n\n\npovHash\n\t\n0x878a4c8684f1ec947315183187204a69dda8dc51fcbfeb39ab00dcdb4d45988b\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0x3a2f2495cd63164afc4f464566a8446a6614f9bf7cb50ccac0c5635cf014241e6ef005372de83ca07551bc2c8227e7055e882ec567ddaf34b8ee5442e224df84\n\n\nvalidationCodeHash\n\t\n0x1915b12af1b41674612e52d554ff1e56c5c0a4e8ff66a1d10eed853432d35803\n\n\n1\n\t\n0x3dcd661a8944752b405d748ab52097bb3d8e7e3e8b0a42153d40f28af46e38c8ea847500ef2ea44c045caf143db41db9eac09a55cf9134262d012c295066bfb9317efc8cadad9a086185d36b8d30a0447e9fa82bd29b92f38f5fbef8cf201f0b12ee748f08066175726120bf7e72080000000005617572610101ca72bdd8e195646a287ec4d71c91f40082034150450fcab6aae2d41aaacfa36f3559c7801cf8f39fd71878161e7e2c02a568cdf5cba11dae4cb83b2a7d68eb81\n\n\n2\n\t\n37\n\n\n3\n\t\n17"
+    ],
+    [
+      "18278717-9",
+      "ParaInclusion.CandidateIncluded",
+      "18278717-1",
+      "Parsed\nRaw\n0\n\t\ncommitmentsHash\n\t\n0x71ca4cf80f28e4d7ce19f8275601acd92f48dd1667f7cdae3b7d3e67100bfa1e\n\n\ndescriptor\n\t\ncollator\n\t\n0xa284e8e2323c93971f99f28a1925392a3173baf510e78458e1e4259daace423d\n\n\nerasureRoot\n\t\n0xaa80ba55b8a48643ec5711d81f04975381f7d1a2b74641d67ec90ddb0be3f50e\n\n\nparaHead\n\t\n0xd301815189a3221911c946675ca379a5d57bbe18ebcaab6685a3018a410a92a3\n\n\nparaId\n\t\n2104\n\n\npersistedValidationDataHash\n\t\n0xc7b300a860a4b5f050e46021fe75d63452dc8f1074e2c68412e48a2032e81371\n\n\npovHash\n\t\n0xb7013cc6312b549087214cc2ac0e01f619ae440136fe56bcc4c30584c0db19cf\n\n\nrelayParent\n\t\n0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06\n\n\nsignature\n\t\n0x06e1fc283eead91843d7e92c8aeabdbe2e37124cd33f0c46bb39fb3736c27c345947f0443fde8773a3a3f1ed8c9cba3a4c50f306da6d33f581176bcd65bede8f\n\n\nvalidationCodeHash\n\t\n0x0df5e7fe44f3bacb3193b6d8a993de42eff11b92940b81a4c71e15a2d1630b2a\n\n\n1\n\t\n0xb3ace8f2895f9c4aa4336d65f2a3442c33e158eca9ee5d659aaba8c9aa887b14aade6900afdfc6b6602b7f43e6d0273d01e8b791e2622d1e3b57f13361c343c7068d536833262c9e16b6b2f670ea46ae9a8e8cced71c935606dbc53332f36f1f85193fca08066e6d6273801eda33797b226fed66ea3ac327a77f26b594b90bc9e9af7416a651bef07a7c72056e6d627301017c7122ec07f87f1b4b6cb2e587569c9752d1c7e1fa4ff36289575511770cf3098bcfe5715b20809a4d4f7bc4d5ac4a1c18a8023a9b18e2df74934e019abc2689\n\n\n2\n\t\n40\n\n\n3\n\t\n20"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailsevents error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-events-request.json b/test/e2e/fixtures/block-events-request.json
new file mode 100644
index 00000000..98284664
--- /dev/null
+++ b/test/e2e/fixtures/block-events-request.json
@@ -0,0 +1,467 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: EventWhereInput, $order: [EventOrderByInput!]!) {\n\t\t\teventsConnection(orderBy: $order, where: $filter, first: $first, after: $after) {\n\t\t\t\t...ExplorerSquidEventsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidEventsConnection on EventsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "block": {
+              "id_eq": "0018278717-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "eventsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000000-673df",
+                  "eventName": "UpdatedInactive",
+                  "palletName": "Treasury",
+                  "indexInBlock": 0,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": null,
+                  "call": null
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000001-673df",
+                  "eventName": "ExtrinsicSuccess",
+                  "palletName": "System",
+                  "indexInBlock": 1,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000000-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000000-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000002-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 2,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 3,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000004-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 4,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000005-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 5,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000006-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 6,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000007-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 7,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000008-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 8,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000009-673df",
+                  "eventName": "CandidateIncluded",
+                  "palletName": "ParaInclusion",
+                  "indexInBlock": 9,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000001-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000001-673df"
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 68
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://polkadot.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tevents(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0018278717-000000-673df",
+            "0018278717-000001-673df",
+            "0018278717-000002-673df",
+            "0018278717-000003-673df",
+            "0018278717-000004-673df",
+            "0018278717-000005-673df",
+            "0018278717-000006-673df",
+            "0018278717-000007-673df",
+            "0018278717-000008-673df",
+            "0018278717-000009-673df"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0018278717-000000-673df",
+              "args": {
+                "deactivated": "446877210177312973",
+                "reactivated": "446877210048143243"
+              }
+            },
+            {
+              "id": "0018278717-000001-673df",
+              "args": {
+                "dispatchInfo": {
+                  "class": {
+                    "__kind": "Mandatory"
+                  },
+                  "paysFee": {
+                    "__kind": "Yes"
+                  },
+                  "weight": {
+                    "proofSize": "1493",
+                    "refTime": "242610000"
+                  }
+                }
+              }
+            },
+            {
+              "id": "0018278717-000002-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x7e91e2867e25a0d734fb082125f6f27860671274ba60c311ed26b51f5840288b",
+                  "descriptor": {
+                    "collator": "0xa0e96b29fd51b155bbc2d7b1f4a8f88c4bdb7431414ab7736d386e47b1678c31",
+                    "erasureRoot": "0xec000d9010232e19a616f31436b7e14f2da569b19f2f0e50fa34872c3a54e9b3",
+                    "paraHead": "0x45e00a49ce98c354aaa4feb3f5a12be69969e5fd678d9ca2e4e711a4a91c5b93",
+                    "paraId": 2013,
+                    "persistedValidationDataHash": "0x73fbb7cb1f5090698e21bf17daed395de3a5ae7606bf693d8dee9fc4919f361b",
+                    "povHash": "0xf38f541fc459be775e21c7638b9e406d92271c7ab1d8b812d4d0d11be2c0e714",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0xeaa4f377c4a523307eed554ed0044b4e81b1a131f644a7e242434f6cada456175d0e10da2300f0c1d6595b9dc206d3e696e128c9bab055d4730a48a5c4ff718d",
+                    "validationCodeHash": "0x8a155e1e06a00c28bd7beca09ac6a5ae143461c54658f2a436ba5c231e2acb89"
+                  }
+                },
+                "0xff66cccf881ad9721264fe8cecfcccba2e3b1f0c78723469d44bdf30ef78120e7a08e1005e07d5d41470a43a8c9bcd4090feb0b0d1241c8f438b657d279f2a95fd7617f58e0b58714fe46f57289e8e713da76b22cf1ab99b153a82d136d3951e6b6247e808066175726120bf7e72080000000005617572610101ce36e7fc3275fd126a2a23d64d49e11e8116802a686846c9eda435a7a0c561789682126fdfb04a1cd34bba2dc5746e9b176544276dc73ff36b7b4e5aeccb9085",
+                10,
+                49
+              ]
+            },
+            {
+              "id": "0018278717-000003-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x897d3702c508ad5b08f0038527aefdc9d2104c3809cc17900f02c86c0e2e04d6",
+                  "descriptor": {
+                    "collator": "0x981fb56c96bf26fe5144470fbc5c4db558443abcf45ced6e35ff9ea157792a77",
+                    "erasureRoot": "0x51941be5d44524c1146aad1fae6cda7a28483ef314bf724b2486d3c1c0fdd4d9",
+                    "paraHead": "0xfde39ab14d327be8dae118db4fda4093a11ed81703506cce448c9fb48d2954ec",
+                    "paraId": 2019,
+                    "persistedValidationDataHash": "0xe8769f2a88a0eda61827b595c921c79f228b9ba1253719276d4109ecc2ae339a",
+                    "povHash": "0x891499bcb47111ef4e8f74fb019a3ddebaf458c82fbb62c9b163500864118ceb",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0x8ab964900ca31df06395149c6d03a13a282877e508876682401afe3a8324504708d3e0bab60e3004477d22941d0b6f35d4cd89dc6d9331d696ebceab42ca188d",
+                    "validationCodeHash": "0xeb5e2b85a4a09e8022ca81daa72eb50f99c41213d7a8164df08a02af6ae76f06"
+                  }
+                },
+                "0xd534f9ae50913b527e1447535eb4357cf664b6433657074fd236f1cecf957fc29a17ce00d7046565720f3024c552439e25e53b364f9e57dc41429197548fb4d69441383b9bce6ba7e93f7e3646156eae2839fe13defe44defd2ec2204aa3d773252d3af00c066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b04056175726101011e89aa0f520e8a8cfbbaf2cb8e696dba23233988e474e85be27dcd82a7434348ff32ae683110219a8fb03113eb7f898021b764238f448e84d426baee0b0ed785",
+                11,
+                50
+              ]
+            },
+            {
+              "id": "0018278717-000004-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x662279a8a85a5a87db3d86065fe6fe9841fde0b48093fed170c0841c560b1a46",
+                  "descriptor": {
+                    "collator": "0xcaa1e970d70740cafb28a7a73969a5d9bbedea565bd1ef26065a34da36336e01",
+                    "erasureRoot": "0x957690cc9774808d2d8aee732d629a4a2924d94879124570112f11088bf8ec4d",
+                    "paraHead": "0x86063603ea4f00fd355da4f4be4c77291e4ab4358983fc3c63a42c92ed899d3f",
+                    "paraId": 2037,
+                    "persistedValidationDataHash": "0x6246a8b3e2c6ec4abc2b1d5afe3374d27943201d32b6dc7fc46b0d939c5913d9",
+                    "povHash": "0x421c841bf375f01068eb3c41f18d054a6f172bf44de0ae64aacf6d131d4ba950",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0xa251b42a4bce95c5e26b47710b1cfa859216b7ae4a963dd160445cdb234942460bd1d1a5edfb1cb2efdc6350f58f84e72952c0fa84f76f07ee553ceafde98184",
+                    "validationCodeHash": "0x8bd754a6cdd7b4f24ca6c9296baee19418f3eeb0182ed844fe24f544d3f34942"
+                  }
+                },
+                "0x3df890e1cbb3fb7a4392cb57dacfdb57c8f4a692e34d9ec3995dc27c57d1eded4247e300b1fe0b930c2b21410f6f2d80799a4070554ec490d8276833b956ca57dffe9bed8aa394691375d51b32c00de793e2f3de464e4d6cb8268b20c328c5258673379610066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b040466726f6e8801b1c41685b7d044297666912a021acd018c3d2afb96c5de0ef39d7d3951c29f1700056175726101016e30e76665d6f9389211f22e825c047907e383e3a5831c846bfc6a5820682764e7ca51e8b5ad151c94814d65400d0e88036960c3db1e1fecca833c3c07dac58a",
+                20,
+                0
+              ]
+            },
+            {
+              "id": "0018278717-000005-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x5ee585e5f3bf8585f2f27cb435dfcf3a9dc902623014625f35d8f755411d30fc",
+                  "descriptor": {
+                    "collator": "0xa02e6772857e9cc189b447a314f8b99121235088ca731ec83947765636a8ec2e",
+                    "erasureRoot": "0x92d1e0b0e6fd3df53374729fae5c2a99f18ba29c57cb6c6cce21914aead03856",
+                    "paraHead": "0x05f07dde217c78b31cc9a5429fad9fb165793527a3abdc0057b1825d549c2740",
+                    "paraId": 2043,
+                    "persistedValidationDataHash": "0x5a58a7cdb7838c8d26720f71a01e68f303e2bd4b166d65462e2ce63c48aa8b38",
+                    "povHash": "0xf2ff1d267bfced08e29ded8bd44fbc72b6ca97a4588b83b22ce0922bf90ced01",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0x9899be1b69e0a72ee949ae618665878364b6893e74d0869e228367384ecd884eed5250b3725939701ff2f4deda5adbbb92c57840069f11de644805e366aebe8a",
+                    "validationCodeHash": "0xc7f62a3b792962188d29434c701695fac145be19180c6121beac2e168c7dba89"
+                  }
+                },
+                "0xf39a06bcfc859696dd94385ae02c2009a3a2eeefa0ad129bc671ef8fa1b61c7fc63be40037785dced27d5142995bbf69fec6d7aeec2785296f69c510af816fad843683361ca34f6b83bc57f01a38b998c1eb88e121ca58129c86a5ac321b5ece0718d8280c066175726120bf7e7208000000000466726f6e0907014a4077cd769243c8fed991de233ea869b07fe66acf2e5e8c7b8d42ed63a5f6e734f1aa46b606c2daea5bf6010e186ee4d8ba3d40518c257dec8872d4e7080441cbd224233873551c90baee9920fa2c55c7b21ddfdd1d3c2f9d26df2dab470610e1278835607e9c7d1d1c3c5dd7d0ecbc97cad0ff003853cbddc0b7f804a924fa0ccc302e7664c61565202016752209169430782e8eb231e510b5c0a126c40aab284632636999f9494da2e44d1b04b56646c6fe58df7c05009d847e48cd620c3987a6b2f722b7bd27d299673bf7c3f518753aee81271180fa6faa5ec9040e8083c6141b7e2ea20eec4f1b5f08073caed6f3381e0850ce0582825e012169365fc5265d5b4019aac441402a2d756e9afba30688c9ca134eb3126f692a3b154e55640c1b7b9c70b3d99dccae3d7b93148c2f97ffde68348c4576a6cf4d7a2fdb05a744bf8b0071b025b6424e0163411dccaad2205b9384b297dd736f01c4bc36a9b6cd6ccc529b60d4b9b48979e0db7eb7da4d8a55e90417c45a0e3b27f8b1ac54437f3e1786410516f8075fd3eea08e7193318ed0790e3a38209fa063a665caca2b6cc6b50bdf939c97ba4512c65ee2458e1211772330babadc66adfae287f8ee1c62056175726101019881e1e2395e37b11b743b7fb4e1f81a3593afdc1508c1d7d1506293b932cc0f4e28ccf52958bf3c3d91bf7c8e7185f9d4810fe97e40c9598a6981625cc44382",
+                23,
+                3
+              ]
+            },
+            {
+              "id": "0018278717-000006-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x9a545aa8c75adb509a5422301ac9e8bc06455eeba14aea9328590d1632fa6377",
+                  "descriptor": {
+                    "collator": "0x604bd22fc4ec65f712bfd5c6044181fb483054bef62fc927ddf21f31d4bc736f",
+                    "erasureRoot": "0x20dcd9305a5c1703bc46539b051b5d87ea03c3b087637da82a2cb223c1a7f63d",
+                    "paraHead": "0xda00e6eddc79ce55d25215004673589fe54d13423f15d8c220bfefd9ae959c3a",
+                    "paraId": 2056,
+                    "persistedValidationDataHash": "0xba637331ac48b67ec37a227cfbed27fa28bd93934f8bd2abb4c1b69eb219ef18",
+                    "povHash": "0x0e1c939df4152035e7a8ad88591a27394b2ad230d83e0610720502cd495f6040",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0xdca00778084d9b2667988357f73dc988cc993c1a94b8ab9889aaf34c882e676dbc93bf69aa5c66a084fb567dd81592c216c3752ee798eab27f47979267ef0483",
+                    "validationCodeHash": "0xfea7101fc0254e4e0ddd3afe1901e01e476dddc0d1b4e3224caf9519e3a712c0"
+                  }
+                },
+                "0x3153bcaa5b204b1b806749092304a098aa362de4b4a38251a03bb2fdbbf998c76229960056840f726db54e1586b78a95bf122f1bd76ad497aff34f54f3930c28c6c611304e494488cbca412700e841bbb5bdaa96913fd719298236f7de3704b7c09b0d8308066175726120bf7e72080000000005617572610101587292b949807cbd7e634af36e05ae1cceca51b9170f320f73d559072ee665395e8c833eec8f2c542f424d42ba22946d524aa0714d1793bdb41e38e5d8d9868e",
+                30,
+                10
+              ]
+            },
+            {
+              "id": "0018278717-000007-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x76e73ec529c175ed67a4dfaf49489ea85426e817cc434ce1e39a519aa7c36147",
+                  "descriptor": {
+                    "collator": "0x8c53245207e4c4335d4e8e5065a9798f09e1a6e3a7dbe4f859a0ab21f85a2c40",
+                    "erasureRoot": "0xc68d3b8393e9c0341d996d0397cb4b030848bcad78b9f3c2fb1ad2cb918ac97b",
+                    "paraHead": "0x7a195a6c13fcbbfa24aaf8651b6c16c8c7f5bcca3ec186e4331b05bb8dd4f56d",
+                    "paraId": 2091,
+                    "persistedValidationDataHash": "0x16b1fae47a051d95a03061d1bac0c4ffa12acebf759438ba5a91f46f4485f6a1",
+                    "povHash": "0x642cc7406ef7418c761477c2c9bcbde506e2146b1bc49dccffbf6594313e7403",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0x4220b3765a9dcb11e32ed9b622c5be1c181315561a0bbfdcf74964528893b20f87eb783b2941b367fde188fe836fad47815de1632135440b573b16c76bf59b82",
+                    "validationCodeHash": "0xca4d75ad8d9bbcd9b399a812fddaeda403b7564341bdd2a0e9b3d213fee9dfec"
+                  }
+                },
+                "0x9f02990f0d8dcd2e267fa6ae81bc9a5359d9e567f61863f331eb7c119024e127821c9b00843bffcd039edd13aaf478995d8346bbf26d46940805a1c085964f74350d70e9e54e037e8027df3a1af245c9d4d3ae8f02d03d4ec2db8a57fceb3bf476a2774a0c066175726120bf7e72080000000004525053529054f7fd6bca8346a1b3cb25549de189227e6dad5d6246128faadbf4126d860cc0eea45b04056175726101017a000950ad4cd67db36e019779afb476921c0a1ee8e3cfedb36b84c1cc54c401b97b5e4952a27a7171ae13e10a297843a6d183adf87717de7ccf25ae18279082",
+                34,
+                14
+              ]
+            },
+            {
+              "id": "0018278717-000008-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0xb6059fb91716d2ca6389658d3400410e5810c18dbea0a8657bcbd18b9f234372",
+                  "descriptor": {
+                    "collator": "0xe836d2c36c647056f8911eb0efd0433dde7ff8105cfb2ce3c8191a0a3c544c23",
+                    "erasureRoot": "0x017b83ce31a1bf41fbfb84a6caea7453b3bb663405edca5a20194789d99ba849",
+                    "paraHead": "0x5c4662df2ee9925f7a8a0d83ca2ddbc12eab10302741b31870385b98d70c69a8",
+                    "paraId": 2094,
+                    "persistedValidationDataHash": "0x2772157e26e6dd3c2f5585fff6fc35fc43dd61966bb2f493f850f81d34312ead",
+                    "povHash": "0x878a4c8684f1ec947315183187204a69dda8dc51fcbfeb39ab00dcdb4d45988b",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0x3a2f2495cd63164afc4f464566a8446a6614f9bf7cb50ccac0c5635cf014241e6ef005372de83ca07551bc2c8227e7055e882ec567ddaf34b8ee5442e224df84",
+                    "validationCodeHash": "0x1915b12af1b41674612e52d554ff1e56c5c0a4e8ff66a1d10eed853432d35803"
+                  }
+                },
+                "0x3dcd661a8944752b405d748ab52097bb3d8e7e3e8b0a42153d40f28af46e38c8ea847500ef2ea44c045caf143db41db9eac09a55cf9134262d012c295066bfb9317efc8cadad9a086185d36b8d30a0447e9fa82bd29b92f38f5fbef8cf201f0b12ee748f08066175726120bf7e72080000000005617572610101ca72bdd8e195646a287ec4d71c91f40082034150450fcab6aae2d41aaacfa36f3559c7801cf8f39fd71878161e7e2c02a568cdf5cba11dae4cb83b2a7d68eb81",
+                37,
+                17
+              ]
+            },
+            {
+              "id": "0018278717-000009-673df",
+              "args": [
+                {
+                  "commitmentsHash": "0x71ca4cf80f28e4d7ce19f8275601acd92f48dd1667f7cdae3b7d3e67100bfa1e",
+                  "descriptor": {
+                    "collator": "0xa284e8e2323c93971f99f28a1925392a3173baf510e78458e1e4259daace423d",
+                    "erasureRoot": "0xaa80ba55b8a48643ec5711d81f04975381f7d1a2b74641d67ec90ddb0be3f50e",
+                    "paraHead": "0xd301815189a3221911c946675ca379a5d57bbe18ebcaab6685a3018a410a92a3",
+                    "paraId": 2104,
+                    "persistedValidationDataHash": "0xc7b300a860a4b5f050e46021fe75d63452dc8f1074e2c68412e48a2032e81371",
+                    "povHash": "0xb7013cc6312b549087214cc2ac0e01f619ae440136fe56bcc4c30584c0db19cf",
+                    "relayParent": "0x3a20dfbe717d075fb5784ec2cb43c10ac983029c14f041e77f972210e4261d06",
+                    "signature": "0x06e1fc283eead91843d7e92c8aeabdbe2e37124cd33f0c46bb39fb3736c27c345947f0443fde8773a3a3f1ed8c9cba3a4c50f306da6d33f581176bcd65bede8f",
+                    "validationCodeHash": "0x0df5e7fe44f3bacb3193b6d8a993de42eff11b92940b81a4c71e15a2d1630b2a"
+                  }
+                },
+                "0xb3ace8f2895f9c4aa4336d65f2a3442c33e158eca9ee5d659aaba8c9aa887b14aade6900afdfc6b6602b7f43e6d0273d01e8b791e2622d1e3b57f13361c343c7068d536833262c9e16b6b2f670ea46ae9a8e8cced71c935606dbc53332f36f1f85193fca08066e6d6273801eda33797b226fed66ea3ac327a77f26b594b90bc9e9af7416a651bef07a7c72056e6d627301017c7122ec07f87f1b4b6cb2e587569c9752d1c7e1fa4ff36289575511770cf3098bcfe5715b20809a4d4f7bc4d5ac4a1c18a8023a9b18e2df74934e019abc2689",
+                40,
+                20
+              ]
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-extrinsics-data.json b/test/e2e/fixtures/block-extrinsics-data.json
new file mode 100644
index 00000000..77e31f54
--- /dev/null
+++ b/test/e2e/fixtures/block-extrinsics-data.json
@@ -0,0 +1,26 @@
+{
+  "itemsCount": "(4)",
+  "itemsTable": [
+    [
+      "18278717-0",
+      "Timestamp.set",
+      ""
+    ],
+    [
+      "18278717-1",
+      "ParaInherent.enter",
+      ""
+    ],
+    [
+      "18278717-2",
+      "Balances.transfer_keep_alive",
+      "129fZm...cbTEwb"
+    ],
+    [
+      "18278717-3",
+      "Utility.batch_all",
+      "1qnJN7...4t8GT7"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailsextrinsics error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-extrinsics-request.json b/test/e2e/fixtures/block-extrinsics-request.json
new file mode 100644
index 00000000..dad73d5d
--- /dev/null
+++ b/test/e2e/fixtures/block-extrinsics-request.json
@@ -0,0 +1,135 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {\n\t\t\textrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "block": {
+              "id_eq": "0018278717-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000000-673df",
+                  "extrinsicHash": "0xdcf25341a2c3e9b94eabca113352b99c578c0ae59e3a74903d2f1896889c2715",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000001-673df",
+                  "extrinsicHash": "0xf10d3a55d546c29d43575127b7be48f227b771d0c398ea9518dc90270ee1536c",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "enter",
+                    "palletName": "ParaInherent"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000002-673df",
+                  "extrinsicHash": "0x99e8aac671da4dfd64f928b9bbd90af2340751a23878c36b5777e32c440eab7b",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "161348041",
+                  "signerPublicKey": "0x32d804aff686f512841f7f31b7091a31d41fcc5aa89a4eed8d2d2705b62517fe",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df",
+                  "extrinsicHash": "0xc06d2f1b8c460e8221a6cfec6e406064d7c5720b26374f8018b39d3ced792d31",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "batch_all",
+                    "palletName": "Utility"
+                  },
+                  "indexInBlock": 3,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "249583871",
+                  "signerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "4",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 4
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-info-data.json b/test/e2e/fixtures/block-info-data.json
new file mode 100644
index 00000000..75ed2a98
--- /dev/null
+++ b/test/e2e/fixtures/block-info-data.json
@@ -0,0 +1,41 @@
+{
+  "header": "Block #18278717",
+  "infoTable": [
+    [
+      "Network",
+      "Polkadot"
+    ],
+    [
+      "Timestamp",
+      "22 Nov 2023 12:16:06 (UTC)"
+    ],
+    [
+      "Block time",
+      ""
+    ],
+    [
+      "Block height",
+      "18278717"
+    ],
+    [
+      "Hash",
+      "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af"
+    ],
+    [
+      "Parent hash",
+      "0xceb9420e32a1f78525d13126e1f8d8a4db29e8137bd8e981a8e98fb3d5380c35"
+    ],
+    [
+      "Validator",
+      "12F14P9VpqyLtjwTh66z9gDmjYh8rRFY2uV4BYxvPAz9Lhzw"
+    ],
+    [
+      "Spec version",
+      "9431"
+    ]
+  ],
+  "notFoundHeader": "Block #18278717",
+  "notFound": "No block found",
+  "errorHeader": "Block #18278717",
+  "error": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsBlock error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/block-info-request.json b/test/e2e/fixtures/block-info-request.json
new file mode 100644
index 00000000..d9528f43
--- /dev/null
+++ b/test/e2e/fixtures/block-info-request.json
@@ -0,0 +1,34 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($filter: BlockWhereInput) {\n\t\t\tblocks(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "filter": {
+            "height_eq": 18278717
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": [
+            {
+              "id": "0018278717-673df",
+              "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+              "height": 18278717,
+              "timestamp": "2023-11-22T12:16:06.000000Z",
+              "parentHash": "0xceb9420e32a1f78525d13126e1f8d8a4db29e8137bd8e981a8e98fb3d5380c35",
+              "validator": "0x36e9dd8a810cd5f94f4f61cc59f1dd1a7df21e88261e6bc1fc23467f015e7b3c",
+              "specVersion": 9431
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/call-events-data.json b/test/e2e/fixtures/call-events-data.json
new file mode 100644
index 00000000..3fae5360
--- /dev/null
+++ b/test/e2e/fixtures/call-events-data.json
@@ -0,0 +1,56 @@
+{
+  "itemsCount": "(17)",
+  "itemsTable": [
+    [
+      "18278717-51",
+      "Balances.Withdraw",
+      "Parsed\nRaw\namount\n\t\n249583871\n\n\nwho\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7"
+    ],
+    [
+      "18278717-52",
+      "System.NewAccount",
+      "Parsed\nRaw\naccount\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2"
+    ],
+    [
+      "18278717-53",
+      "Balances.Endowed",
+      "Parsed\nRaw\naccount\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2\n\n\nfreeBalance\n\t\n2862403449700"
+    ],
+    [
+      "18278717-54",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n2862403449700\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2"
+    ],
+    [
+      "18278717-55",
+      "Utility.ItemCompleted",
+      ""
+    ],
+    [
+      "18278717-56",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n309566836000\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n14FrdgVyZdDBFmmZx3TCPPjrPgz4he6zta9tQM7ndtPFrZuP"
+    ],
+    [
+      "18278717-57",
+      "Utility.ItemCompleted",
+      ""
+    ],
+    [
+      "18278717-58",
+      "System.NewAccount",
+      "Parsed\nRaw\naccount\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81"
+    ],
+    [
+      "18278717-59",
+      "Balances.Endowed",
+      "Parsed\nRaw\naccount\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81\n\n\nfreeBalance\n\t\n114834724000"
+    ],
+    [
+      "18278717-60",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n114834724000\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailsevents error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/call-events-request.json b/test/e2e/fixtures/call-events-request.json
new file mode 100644
index 00000000..7429fbec
--- /dev/null
+++ b/test/e2e/fixtures/call-events-request.json
@@ -0,0 +1,239 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: EventWhereInput, $order: [EventOrderByInput!]!) {\n\t\t\teventsConnection(orderBy: $order, where: $filter, first: $first, after: $after) {\n\t\t\t\t...ExplorerSquidEventsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidEventsConnection on EventsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "call": {
+              "id_eq": "0018278717-000003-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "eventsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000051-673df",
+                  "eventName": "Withdraw",
+                  "palletName": "Balances",
+                  "indexInBlock": 51,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000052-673df",
+                  "eventName": "NewAccount",
+                  "palletName": "System",
+                  "indexInBlock": 52,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000053-673df",
+                  "eventName": "Endowed",
+                  "palletName": "Balances",
+                  "indexInBlock": 53,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000054-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 54,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000055-673df",
+                  "eventName": "ItemCompleted",
+                  "palletName": "Utility",
+                  "indexInBlock": 55,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000056-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 56,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000057-673df",
+                  "eventName": "ItemCompleted",
+                  "palletName": "Utility",
+                  "indexInBlock": 57,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000058-673df",
+                  "eventName": "NewAccount",
+                  "palletName": "System",
+                  "indexInBlock": 58,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000059-673df",
+                  "eventName": "Endowed",
+                  "palletName": "Balances",
+                  "indexInBlock": 59,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000060-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 60,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 17
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/call-info-data.json b/test/e2e/fixtures/call-info-data.json
new file mode 100644
index 00000000..c2c93b88
--- /dev/null
+++ b/test/e2e/fixtures/call-info-data.json
@@ -0,0 +1,49 @@
+{
+  "header": "Call #18278717-3",
+  "infoTable": [
+    [
+      "Network",
+      "Polkadot"
+    ],
+    [
+      "Timestamp",
+      "22 Nov 2023 12:16:06 (UTC)"
+    ],
+    [
+      "Block time",
+      ""
+    ],
+    [
+      "Block",
+      "18278717"
+    ],
+    [
+      "Extrinsic",
+      "18278717-3"
+    ],
+    [
+      "Sender",
+      "1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7"
+    ],
+    [
+      "Result",
+      "Success"
+    ],
+    [
+      "Name",
+      "Utility.batch_all"
+    ],
+    [
+      "Parameters",
+      "Parsed\nRaw\ncalls\n\t\n0\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n2862403449700\n\n\n1\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n309566836000\n\n\n2\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n114834724000"
+    ],
+    [
+      "Spec version",
+      "9431"
+    ]
+  ],
+  "notFoundHeader": "Call #18278717-3",
+  "notFound": "No call found",
+  "errorHeader": "Call #18278717-3",
+  "error": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsCall error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/call-info-request.json b/test/e2e/fixtures/call-info-request.json
new file mode 100644
index 00000000..ce8e02ac
--- /dev/null
+++ b/test/e2e/fixtures/call-info-request.json
@@ -0,0 +1,112 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($filter: CallWhereInput) {\n\t\t\tcalls(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "filter": {
+            "block": {
+              "height_eq": 18278717
+            },
+            "extrinsic": {
+              "indexInBlock_eq": 3
+            },
+            "parentId_isNull": true
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "calls": [
+            {
+              "id": "0018278717-000003-673df",
+              "callName": "batch_all",
+              "palletName": "Utility",
+              "success": true,
+              "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+              "parentId": null,
+              "block": {
+                "id": "0018278717-673df",
+                "height": 18278717,
+                "timestamp": "2023-11-22T12:16:06.000000Z",
+                "specVersion": 9431
+              },
+              "extrinsic": {
+                "id": "0018278717-000003-673df",
+                "indexInBlock": 3
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://polkadot.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tcalls(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0018278717-000003-673df"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "calls": [
+            {
+              "id": "0018278717-000003-673df",
+              "args": {
+                "calls": [
+                  {
+                    "__kind": "Balances",
+                    "value": {
+                      "__kind": "transfer_allow_death",
+                      "dest": {
+                        "__kind": "Id",
+                        "value": "0x92871f0e49fefc71a718a43cb1e165d698023eb7e0457e949282bd6014241cc8"
+                      },
+                      "value": "2862403449700"
+                    }
+                  },
+                  {
+                    "__kind": "Balances",
+                    "value": {
+                      "__kind": "transfer_allow_death",
+                      "dest": {
+                        "__kind": "Id",
+                        "value": "0x900936b39848e507cfdcb361d734784110d2382d595195a2bf7e7138e8588211"
+                      },
+                      "value": "309566836000"
+                    }
+                  },
+                  {
+                    "__kind": "Balances",
+                    "value": {
+                      "__kind": "transfer_allow_death",
+                      "dest": {
+                        "__kind": "Id",
+                        "value": "0x00ed9f18477116a662081c0ab528f83cdc6b529164b1fa4f6b73d274a58d2520"
+                      },
+                      "value": "114834724000"
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/event-info-data.json b/test/e2e/fixtures/event-info-data.json
new file mode 100644
index 00000000..9153be30
--- /dev/null
+++ b/test/e2e/fixtures/event-info-data.json
@@ -0,0 +1,45 @@
+{
+  "header": "Event #18278717-51",
+  "infoTable": [
+    [
+      "Network",
+      "Polkadot"
+    ],
+    [
+      "Timestamp",
+      "22 Nov 2023 12:16:06 (UTC)"
+    ],
+    [
+      "Block time",
+      ""
+    ],
+    [
+      "Block",
+      "18278717"
+    ],
+    [
+      "Extrinsic",
+      "18278717-3"
+    ],
+    [
+      "Call",
+      "18278717-3"
+    ],
+    [
+      "Name",
+      "Balances.Withdraw"
+    ],
+    [
+      "Parameters",
+      "Parsed\nRaw\namount\n\t\n249583871\n\n\nwho\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7"
+    ],
+    [
+      "Spec version",
+      "9431"
+    ]
+  ],
+  "notFoundHeader": "Event #18278717-51",
+  "notFound": "No event found",
+  "errorHeader": "Event #18278717-51",
+  "error": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsEvent error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/event-info-request.json b/test/e2e/fixtures/event-info-request.json
new file mode 100644
index 00000000..af188100
--- /dev/null
+++ b/test/e2e/fixtures/event-info-request.json
@@ -0,0 +1,74 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($filter: EventWhereInput) {\n\t\t\tevents(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "filter": {
+            "blockNumber_eq": 18278717,
+            "indexInBlock_eq": 51
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0018278717-000051-673df",
+              "eventName": "Withdraw",
+              "palletName": "Balances",
+              "indexInBlock": 51,
+              "block": {
+                "id": "0018278717-673df",
+                "height": 18278717,
+                "timestamp": "2023-11-22T12:16:06.000000Z",
+                "specVersion": 9431
+              },
+              "extrinsic": {
+                "id": "0018278717-000003-673df"
+              },
+              "call": {
+                "id": "0018278717-000003-673df"
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://polkadot.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tevents(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0018278717-000051-673df"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0018278717-000051-673df",
+              "args": {
+                "amount": "249583871",
+                "who": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-calls-data.json b/test/e2e/fixtures/extrinsic-calls-data.json
new file mode 100644
index 00000000..fdc882bc
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-calls-data.json
@@ -0,0 +1,30 @@
+{
+  "itemsCount": "(4)",
+  "itemsTable": [
+    [
+      "18278717-3",
+      "Utility.batch_all",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-1",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-2",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ],
+    [
+      "18278717-3-3",
+      "Balances.transfer_allow_death",
+      "1qnJN7...4t8GT7",
+      "18278717-3"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailscalls error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-calls-request.json b/test/e2e/fixtures/extrinsic-calls-request.json
new file mode 100644
index 00000000..b6d5b401
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-calls-request.json
@@ -0,0 +1,119 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: CallWhereInput, $order: [CallOrderByInput!]!) {\n\t\t\tcallsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidCallsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidCallsConnection on CallsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidCall\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidCall on Call {\n\t\t\t\n\tid\n\tcallName\n\tpalletName\n\tsuccess\n\tcallerPublicKey\n\tparentId\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t\tindexInBlock\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "extrinsic": {
+              "id_eq": "0018278717-000003-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "callsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000003-673df",
+                  "callName": "batch_all",
+                  "palletName": "Utility",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": null,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000001",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000002",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000003-673df-000003",
+                  "callName": "transfer_allow_death",
+                  "palletName": "Balances",
+                  "success": true,
+                  "callerPublicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                  "parentId": "0018278717-000003-673df",
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df",
+                    "indexInBlock": 3
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "4",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 4
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-events-data.json b/test/e2e/fixtures/extrinsic-events-data.json
new file mode 100644
index 00000000..3fae5360
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-events-data.json
@@ -0,0 +1,56 @@
+{
+  "itemsCount": "(17)",
+  "itemsTable": [
+    [
+      "18278717-51",
+      "Balances.Withdraw",
+      "Parsed\nRaw\namount\n\t\n249583871\n\n\nwho\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7"
+    ],
+    [
+      "18278717-52",
+      "System.NewAccount",
+      "Parsed\nRaw\naccount\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2"
+    ],
+    [
+      "18278717-53",
+      "Balances.Endowed",
+      "Parsed\nRaw\naccount\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2\n\n\nfreeBalance\n\t\n2862403449700"
+    ],
+    [
+      "18278717-54",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n2862403449700\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n14K88aGrvnKtPvBfxHFcWzeVFXbzkVyKYUZpccAhohnrTZZ2"
+    ],
+    [
+      "18278717-55",
+      "Utility.ItemCompleted",
+      ""
+    ],
+    [
+      "18278717-56",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n309566836000\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n14FrdgVyZdDBFmmZx3TCPPjrPgz4he6zta9tQM7ndtPFrZuP"
+    ],
+    [
+      "18278717-57",
+      "Utility.ItemCompleted",
+      ""
+    ],
+    [
+      "18278717-58",
+      "System.NewAccount",
+      "Parsed\nRaw\naccount\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81"
+    ],
+    [
+      "18278717-59",
+      "Balances.Endowed",
+      "Parsed\nRaw\naccount\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81\n\n\nfreeBalance\n\t\n114834724000"
+    ],
+    [
+      "18278717-60",
+      "Balances.Transfer",
+      "Parsed\nRaw\namount\n\t\n114834724000\n\n\nfrom\n\t\n1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7\n\n\nto\n\t\n112Db878qJCA89YtZuAkzAVvQwQPMfdFxPmLQvcemxns6W81"
+    ]
+  ],
+  "error": "Unexpected error occured while fetching itemsThis error is logged. No need to report it.Detailsevents error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-events-request.json b/test/e2e/fixtures/extrinsic-events-request.json
new file mode 100644
index 00000000..19f3c289
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-events-request.json
@@ -0,0 +1,336 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: EventWhereInput, $order: [EventOrderByInput!]!) {\n\t\t\teventsConnection(orderBy: $order, where: $filter, first: $first, after: $after) {\n\t\t\t\t...ExplorerSquidEventsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidEventsConnection on EventsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "filter": {
+            "extrinsic": {
+              "id_eq": "0018278717-000003-673df"
+            }
+          },
+          "order": "id_ASC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "eventsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018278717-000051-673df",
+                  "eventName": "Withdraw",
+                  "palletName": "Balances",
+                  "indexInBlock": 51,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000052-673df",
+                  "eventName": "NewAccount",
+                  "palletName": "System",
+                  "indexInBlock": 52,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000053-673df",
+                  "eventName": "Endowed",
+                  "palletName": "Balances",
+                  "indexInBlock": 53,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000054-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 54,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000055-673df",
+                  "eventName": "ItemCompleted",
+                  "palletName": "Utility",
+                  "indexInBlock": 55,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000056-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 56,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000057-673df",
+                  "eventName": "ItemCompleted",
+                  "palletName": "Utility",
+                  "indexInBlock": 57,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000058-673df",
+                  "eventName": "NewAccount",
+                  "palletName": "System",
+                  "indexInBlock": 58,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000059-673df",
+                  "eventName": "Endowed",
+                  "palletName": "Balances",
+                  "indexInBlock": 59,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018278717-000060-673df",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 60,
+                  "block": {
+                    "id": "0018278717-673df",
+                    "height": 18278717,
+                    "timestamp": "2023-11-22T12:16:06.000000Z",
+                    "specVersion": 9431
+                  },
+                  "extrinsic": {
+                    "id": "0018278717-000003-673df"
+                  },
+                  "call": {
+                    "id": "0018278717-000003-673df"
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 17
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://polkadot.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tevents(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0018278717-000051-673df",
+            "0018278717-000052-673df",
+            "0018278717-000053-673df",
+            "0018278717-000054-673df",
+            "0018278717-000055-673df",
+            "0018278717-000056-673df",
+            "0018278717-000057-673df",
+            "0018278717-000058-673df",
+            "0018278717-000059-673df",
+            "0018278717-000060-673df"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0018278717-000051-673df",
+              "args": {
+                "amount": "249583871",
+                "who": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+              }
+            },
+            {
+              "id": "0018278717-000052-673df",
+              "args": {
+                "account": "0x92871f0e49fefc71a718a43cb1e165d698023eb7e0457e949282bd6014241cc8"
+              }
+            },
+            {
+              "id": "0018278717-000053-673df",
+              "args": {
+                "account": "0x92871f0e49fefc71a718a43cb1e165d698023eb7e0457e949282bd6014241cc8",
+                "freeBalance": "2862403449700"
+              }
+            },
+            {
+              "id": "0018278717-000054-673df",
+              "args": {
+                "amount": "2862403449700",
+                "from": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                "to": "0x92871f0e49fefc71a718a43cb1e165d698023eb7e0457e949282bd6014241cc8"
+              }
+            },
+            {
+              "id": "0018278717-000055-673df",
+              "args": null
+            },
+            {
+              "id": "0018278717-000056-673df",
+              "args": {
+                "amount": "309566836000",
+                "from": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                "to": "0x900936b39848e507cfdcb361d734784110d2382d595195a2bf7e7138e8588211"
+              }
+            },
+            {
+              "id": "0018278717-000057-673df",
+              "args": null
+            },
+            {
+              "id": "0018278717-000058-673df",
+              "args": {
+                "account": "0x00ed9f18477116a662081c0ab528f83cdc6b529164b1fa4f6b73d274a58d2520"
+              }
+            },
+            {
+              "id": "0018278717-000059-673df",
+              "args": {
+                "account": "0x00ed9f18477116a662081c0ab528f83cdc6b529164b1fa4f6b73d274a58d2520",
+                "freeBalance": "114834724000"
+              }
+            },
+            {
+              "id": "0018278717-000060-673df",
+              "args": {
+                "amount": "114834724000",
+                "from": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e",
+                "to": "0x00ed9f18477116a662081c0ab528f83cdc6b529164b1fa4f6b73d274a58d2520"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-info-data.json b/test/e2e/fixtures/extrinsic-info-data.json
new file mode 100644
index 00000000..68b0f174
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-info-data.json
@@ -0,0 +1,57 @@
+{
+  "header": "Extrinsic #18278717-3",
+  "infoTable": [
+    [
+      "Network",
+      "Polkadot"
+    ],
+    [
+      "Timestamp",
+      "22 Nov 2023 12:16:06 (UTC)"
+    ],
+    [
+      "Block time",
+      ""
+    ],
+    [
+      "Hash",
+      "0xc06d2f1b8c460e8221a6cfec6e406064d7c5720b26374f8018b39d3ced792d31"
+    ],
+    [
+      "Block",
+      "18278717"
+    ],
+    [
+      "Account",
+      "1qnJN7FViy3HZaxZK9tGAA71zxHSBeUweirKqCaox4t8GT7"
+    ],
+    [
+      "Result",
+      "Success"
+    ],
+    [
+      "Name",
+      "Utility.batch_all"
+    ],
+    [
+      "Parameters",
+      "Parsed\nRaw\ncalls\n\t\n0\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n2862403449700\n\n\n1\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n309566836000\n\n\n2\n\t\nBalances\n\t\ntransfer_allow_death\n\t\n114834724000"
+    ],
+    [
+      "Fee",
+      "249583871"
+    ],
+    [
+      "Signature",
+      "0xe53457b43eee7db5ec4c3eeaf230089b6619e107cacd2e3cff6bbbdbe4ed764e2540d7869a81a8fbd9a9c87cd24cfae878a40ac6de51bec67e6a91452050df02"
+    ],
+    [
+      "Spec version",
+      "9431"
+    ]
+  ],
+  "notFoundHeader": "Extrinsic #18278717-3",
+  "notFound": "No extrinsic found",
+  "errorHeader": "Extrinsic #18278717-3",
+  "error": "Unexpected error occured while fetching dataThis error is logged. No need to report it.DetailsExtrinsic error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/extrinsic-info-request.json b/test/e2e/fixtures/extrinsic-info-request.json
new file mode 100644
index 00000000..3f8aad20
--- /dev/null
+++ b/test/e2e/fixtures/extrinsic-info-request.json
@@ -0,0 +1,105 @@
+[
+  {
+    "request": {
+      "url": "https://polkadot.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($filter: ExtrinsicWhereInput) {\n\t\t\textrinsics(limit: 1, offset: 0, where: $filter, orderBy: id_DESC) {\n\t\t\t\t...ArchiveExtrinsic\n\t\t\t}\n\t\t}\n\n\t\tfragment ArchiveExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\thash\n\tcall {\n\t\tname\n\t\targs\n\t}\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspec {\n\t\t\tspecVersion\n\t\t}\n\t}\n\tsignature\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "filter": {
+            "block": {
+              "height_eq": 18278717
+            },
+            "indexInBlock_eq": 3
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsics": [
+            {
+              "id": "0018278717-000003-673df",
+              "hash": "0xc06d2f1b8c460e8221a6cfec6e406064d7c5720b26374f8018b39d3ced792d31",
+              "call": {
+                "name": "Utility.batch_all",
+                "args": {
+                  "calls": [
+                    {
+                      "__kind": "Balances",
+                      "value": {
+                        "__kind": "transfer_allow_death",
+                        "dest": {
+                          "__kind": "Id",
+                          "value": "0x92871f0e49fefc71a718a43cb1e165d698023eb7e0457e949282bd6014241cc8"
+                        },
+                        "value": "2862403449700"
+                      }
+                    },
+                    {
+                      "__kind": "Balances",
+                      "value": {
+                        "__kind": "transfer_allow_death",
+                        "dest": {
+                          "__kind": "Id",
+                          "value": "0x900936b39848e507cfdcb361d734784110d2382d595195a2bf7e7138e8588211"
+                        },
+                        "value": "309566836000"
+                      }
+                    },
+                    {
+                      "__kind": "Balances",
+                      "value": {
+                        "__kind": "transfer_allow_death",
+                        "dest": {
+                          "__kind": "Id",
+                          "value": "0x00ed9f18477116a662081c0ab528f83cdc6b529164b1fa4f6b73d274a58d2520"
+                        },
+                        "value": "114834724000"
+                      }
+                    }
+                  ]
+                }
+              },
+              "block": {
+                "id": "0018278717-673df",
+                "hash": "0x673df17beb910e02a3236350024dd6ed1b26c394fca1f5669b7aadc7bcea19af",
+                "height": 18278717,
+                "timestamp": "2023-11-22T12:16:06.000000Z",
+                "spec": {
+                  "specVersion": 9431
+                }
+              },
+              "signature": {
+                "address": {
+                  "__kind": "Id",
+                  "value": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+                },
+                "signature": {
+                  "__kind": "Ed25519",
+                  "value": "0xe53457b43eee7db5ec4c3eeaf230089b6619e107cacd2e3cff6bbbdbe4ed764e2540d7869a81a8fbd9a9c87cd24cfae878a40ac6de51bec67e6a91452050df02"
+                },
+                "signedExtensions": {
+                  "ChargeTransactionPayment": "0",
+                  "CheckMortality": {
+                    "__kind": "Mortal165",
+                    "value": 3
+                  },
+                  "CheckNonce": 391500
+                }
+              },
+              "indexInBlock": 3,
+              "success": true,
+              "tip": "0",
+              "fee": "249583871",
+              "error": null,
+              "version": 4
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-blocks-data.json b/test/e2e/fixtures/network-blocks-data.json
new file mode 100644
index 00000000..f3246999
--- /dev/null
+++ b/test/e2e/fixtures/network-blocks-data.json
@@ -0,0 +1,64 @@
+{
+  "itemsTable": [
+    [
+      "18367775",
+      "9431",
+      "15uQdw...cEndzs",
+      ""
+    ],
+    [
+      "18367774",
+      "9431",
+      "1cFsLn...ejUK83",
+      ""
+    ],
+    [
+      "18367773",
+      "9431",
+      "15ANfa...X11pzM",
+      ""
+    ],
+    [
+      "18367772",
+      "9431",
+      "13Emja...caevND",
+      ""
+    ],
+    [
+      "18367771",
+      "9431",
+      "1A2ATy...xGvCho",
+      ""
+    ],
+    [
+      "18367770",
+      "9431",
+      "15VbT8...w57qzp",
+      ""
+    ],
+    [
+      "18367769",
+      "9431",
+      "12e1tk...HApQTn",
+      ""
+    ],
+    [
+      "18367768",
+      "9431",
+      "13pYWK...ogAnhs",
+      ""
+    ],
+    [
+      "18367767",
+      "9431",
+      "14g7Xs...4Pt3Eu",
+      ""
+    ],
+    [
+      "18367766",
+      "9431",
+      "12QnCQ...gBnxbW",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-blocks-request.json b/test/e2e/fixtures/network-blocks-request.json
new file mode 100644
index 00000000..0fd3b8a1
--- /dev/null
+++ b/test/e2e/fixtures/network-blocks-request.json
@@ -0,0 +1,143 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: BlockWhereInput, $order: [BlockOrderByInput!]!) {\n\t\t\tblocksConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\t\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocksConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018367775-ff622",
+                  "hash": "0xff6228de2d16e35a89a2e844c0b2c77dad47948189c311845505bcd9526d8da8",
+                  "height": 18367775,
+                  "timestamp": "2023-11-28T17:02:36.001000Z",
+                  "parentHash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                  "validator": "0xd8e943700c6625ff869b258c77221ea5fe0a01380faf6059d28be5f69405fd51",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-8a579",
+                  "hash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                  "height": 18367774,
+                  "timestamp": "2023-11-28T17:02:30.000000Z",
+                  "parentHash": "0x353409a5e9a1d2d2f8cd4cc650bd0e7f02a682dbb7fe31fe895897cdd5b44988",
+                  "validator": "0x1ae3a39de384cc366c0c0693e82a9b38397a35b201ffc33e383469df052e4227",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-35340",
+                  "hash": "0x353409a5e9a1d2d2f8cd4cc650bd0e7f02a682dbb7fe31fe895897cdd5b44988",
+                  "height": 18367773,
+                  "timestamp": "2023-11-28T17:02:24.001000Z",
+                  "parentHash": "0xe8f6f75d443049668a88f6b692bd49735781da3017cb615059d4b6962924e08c",
+                  "validator": "0xb81712e18e76cfe727bda3fa65662405f584f1ed059aac110ab6f41851ba7e26",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367772-e8f6f",
+                  "hash": "0xe8f6f75d443049668a88f6b692bd49735781da3017cb615059d4b6962924e08c",
+                  "height": 18367772,
+                  "timestamp": "2023-11-28T17:02:18.000000Z",
+                  "parentHash": "0xb24ad97550d286dfb3092b518d2bb60260f506ae5549462f1031dbce0a285e02",
+                  "validator": "0x62f93efa125cfb7f0ec984625f8fc53cdc2f8aa936fc7d1b846831d132e4f701",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367771-b24ad",
+                  "hash": "0xb24ad97550d286dfb3092b518d2bb60260f506ae5549462f1031dbce0a285e02",
+                  "height": 18367771,
+                  "timestamp": "2023-11-28T17:02:12.000000Z",
+                  "parentHash": "0x10e67940202adf20cae69c7996a2ab3484f34f8fbc7d0d257a380fafe2c2cf8a",
+                  "validator": "0x06e11fd0d4df6c4765eb346aac47682cb7871da9ecfd235255f6eadb8392b20d",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367770-10e67",
+                  "hash": "0x10e67940202adf20cae69c7996a2ab3484f34f8fbc7d0d257a380fafe2c2cf8a",
+                  "height": 18367770,
+                  "timestamp": "2023-11-28T17:02:06.000000Z",
+                  "parentHash": "0x79ee5bf480e249246e284efd48751477e6d1eeb81fc47f06dbcc2325fb6842ee",
+                  "validator": "0xc6bfc6a3cade13b0fc2d1ad1741f3fb4562b89c7f3bfb5622dcdae02db653455",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367769-79ee5",
+                  "hash": "0x79ee5bf480e249246e284efd48751477e6d1eeb81fc47f06dbcc2325fb6842ee",
+                  "height": 18367769,
+                  "timestamp": "2023-11-28T17:02:00.000000Z",
+                  "parentHash": "0x524a51043f0d056f4fd5f26ab69eeea0e23ab476096f751b82275ee4ab6d7732",
+                  "validator": "0x4877511245f8954e48858da743b9eb3544681c27ffd8802c8ea1669e961a2b61",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367768-524a5",
+                  "hash": "0x524a51043f0d056f4fd5f26ab69eeea0e23ab476096f751b82275ee4ab6d7732",
+                  "height": 18367768,
+                  "timestamp": "2023-11-28T17:01:54.000000Z",
+                  "parentHash": "0x6b701ee7d9d838c7e7a438b2d03d79ee2d1e2d78cfae19de8c1c3d69f885ea50",
+                  "validator": "0x7cbb0ed8bf228935241774290753bf282020d73e45f6724b0196c97b3bd53462",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367767-6b701",
+                  "hash": "0x6b701ee7d9d838c7e7a438b2d03d79ee2d1e2d78cfae19de8c1c3d69f885ea50",
+                  "height": 18367767,
+                  "timestamp": "2023-11-28T17:01:48.000000Z",
+                  "parentHash": "0x73deb8f39b23f96356c332ccd238ad70d49da3fd71dad5e6b84ab0d177e6f5d5",
+                  "validator": "0xa28942a9d2e8c8501860b847eecedc45d602e614b8b0849b959607d0dec3d071",
+                  "specVersion": 9431
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367766-73deb",
+                  "hash": "0x73deb8f39b23f96356c332ccd238ad70d49da3fd71dad5e6b84ab0d177e6f5d5",
+                  "height": 18367766,
+                  "timestamp": "2023-11-28T17:01:42.000000Z",
+                  "parentHash": "0x61806b80117cb6887449f1e11b2904612fcb37e026110ee8d27c6fb397cae374",
+                  "validator": "0x3e5f05e5397c92e440de154097981b2c1fab4893b210cc2a8680b8096a6bef23",
+                  "specVersion": 9431
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-extrinsics-data.json b/test/e2e/fixtures/network-extrinsics-data.json
new file mode 100644
index 00000000..e0781aa3
--- /dev/null
+++ b/test/e2e/fixtures/network-extrinsics-data.json
@@ -0,0 +1,64 @@
+{
+  "itemsTable": [
+    [
+      "18367775-1",
+      "ParaInherent.enter",
+      "",
+      ""
+    ],
+    [
+      "18367775-0",
+      "Timestamp.set",
+      "",
+      ""
+    ],
+    [
+      "18367774-3",
+      "ConvictionVoting.vote",
+      "15Dn1B...eBAfmQ",
+      ""
+    ],
+    [
+      "18367774-2",
+      "Balances.transfer",
+      "1CP924...zke7eT",
+      ""
+    ],
+    [
+      "18367774-1",
+      "ParaInherent.enter",
+      "",
+      ""
+    ],
+    [
+      "18367774-0",
+      "Timestamp.set",
+      "",
+      ""
+    ],
+    [
+      "18367773-2",
+      "NominationPools.claim_payout",
+      "13au2b...MvJPMx",
+      ""
+    ],
+    [
+      "18367773-1",
+      "ParaInherent.enter",
+      "",
+      ""
+    ],
+    [
+      "18367773-0",
+      "Timestamp.set",
+      "",
+      ""
+    ],
+    [
+      "18367772-1",
+      "ParaInherent.enter",
+      "",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-extrinsics-request.json b/test/e2e/fixtures/network-extrinsics-request.json
new file mode 100644
index 00000000..155b27eb
--- /dev/null
+++ b/test/e2e/fixtures/network-extrinsics-request.json
@@ -0,0 +1,273 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: ExtrinsicWhereInput, $order: [ExtrinsicOrderByInput!]!) {\n\t\t\textrinsicsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\t\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018367775-000001-ff622",
+                  "extrinsicHash": "0x5aa9acc3fb2898007752e34292af611313e2080a8fa1b70f6b3f9bb98e4e3735",
+                  "block": {
+                    "id": "0018367775-ff622",
+                    "hash": "0xff6228de2d16e35a89a2e844c0b2c77dad47948189c311845505bcd9526d8da8",
+                    "height": 18367775,
+                    "timestamp": "2023-11-28T17:02:36.001000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "enter",
+                    "palletName": "ParaInherent"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367775-000000-ff622",
+                  "extrinsicHash": "0xf2b03ef87919d9f12b0f1f19966794c8a19d09f745d88e399a3ab621122e01f0",
+                  "block": {
+                    "id": "0018367775-ff622",
+                    "hash": "0xff6228de2d16e35a89a2e844c0b2c77dad47948189c311845505bcd9526d8da8",
+                    "height": 18367775,
+                    "timestamp": "2023-11-28T17:02:36.001000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-000003-8a579",
+                  "extrinsicHash": "0x8715178db56726a093883136a030a8d37900e9cdb31c7ee3ca03eb8f9d23efef",
+                  "block": {
+                    "id": "0018367774-8a579",
+                    "hash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                    "height": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "vote",
+                    "palletName": "ConvictionVoting"
+                  },
+                  "indexInBlock": 3,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "145702131",
+                  "signerPublicKey": "0xbaaf5f50859a880de305e2fe940a0310687667219d18213405c90bb2cfcdbc67",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-000002-8a579",
+                  "extrinsicHash": "0xf251791e43106af97d08a42db234a95b84df0c5f6219dfaece9181e2eda16455",
+                  "block": {
+                    "id": "0018367774-8a579",
+                    "hash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                    "height": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "157462163",
+                  "signerPublicKey": "0x08ae3932858522195e117afaa5446a20d1332b232553e4d2e450a152224c3475",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-000001-8a579",
+                  "extrinsicHash": "0x3ce2fb0c19cdad96dbe0af74759e19b42b498a1607513aae257750d9e6c29c96",
+                  "block": {
+                    "id": "0018367774-8a579",
+                    "hash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                    "height": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "enter",
+                    "palletName": "ParaInherent"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-000000-8a579",
+                  "extrinsicHash": "0xa1a30f33697f1fd08b5289e0b3f177c6dde86f707acdfebd12c929aa7f237759",
+                  "block": {
+                    "id": "0018367774-8a579",
+                    "hash": "0x8a579e477f03146fd2899707ea659e9f4395faa1a9d7316c42c1e7be5c4f8564",
+                    "height": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-000002-35340",
+                  "extrinsicHash": "0x5265b954fa51ec26d64b814521fde9817745d439258b6c80145720cafb24f056",
+                  "block": {
+                    "id": "0018367773-35340",
+                    "hash": "0x353409a5e9a1d2d2f8cd4cc650bd0e7f02a682dbb7fe31fe895897cdd5b44988",
+                    "height": 18367773,
+                    "timestamp": "2023-11-28T17:02:24.001000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "claim_payout",
+                    "palletName": "NominationPools"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "122962405",
+                  "signerPublicKey": "0x7252b4b1f8103acd6ff363c971c7dea21afc0285ad5ad75176dd53947a6aca4b",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-000001-35340",
+                  "extrinsicHash": "0x04dc90ad0c5bfbd9bf9940ca65cc1ba1d63f17c5927fcbf88a92afc90acc14fe",
+                  "block": {
+                    "id": "0018367773-35340",
+                    "hash": "0x353409a5e9a1d2d2f8cd4cc650bd0e7f02a682dbb7fe31fe895897cdd5b44988",
+                    "height": 18367773,
+                    "timestamp": "2023-11-28T17:02:24.001000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "enter",
+                    "palletName": "ParaInherent"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-000000-35340",
+                  "extrinsicHash": "0x70dec6706eb2482ed6f55c318777b1dccc4a1983ef34513b5ee2020c9f9a4757",
+                  "block": {
+                    "id": "0018367773-35340",
+                    "hash": "0x353409a5e9a1d2d2f8cd4cc650bd0e7f02a682dbb7fe31fe895897cdd5b44988",
+                    "height": 18367773,
+                    "timestamp": "2023-11-28T17:02:24.001000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367772-000001-e8f6f",
+                  "extrinsicHash": "0x329b32686c0ac9205c57e229cdb5b4c5c2076cee51ef384dcf8bf372fa4a5675",
+                  "block": {
+                    "id": "0018367772-e8f6f",
+                    "hash": "0xe8f6f75d443049668a88f6b692bd49735781da3017cb615059d4b6962924e08c",
+                    "height": 18367772,
+                    "timestamp": "2023-11-28T17:02:18.000000Z",
+                    "specVersion": 9431
+                  },
+                  "mainCall": {
+                    "callName": "enter",
+                    "palletName": "ParaInherent"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-holders-data.json b/test/e2e/fixtures/network-holders-data.json
new file mode 100644
index 00000000..deeb6d63
--- /dev/null
+++ b/test/e2e/fixtures/network-holders-data.json
@@ -0,0 +1,74 @@
+{
+  "itemsTable": [
+    [
+      "16ZL8y...9czzBD",
+      "74,129,438.517 DOT\n$385,812,440.60",
+      "74,129,438.517 DOT\n$385,812,440.60",
+      "0 DOT",
+      "18365743"
+    ],
+    [
+      "13UVJy...PhFsTB",
+      "43,988,183.952 DOT\n$228,939,931.93",
+      "43,988,183.952 DOT\n$228,939,931.93",
+      "0 DOT",
+      "18367775"
+    ],
+    [
+      "12xtAY...B6XkLW",
+      "36,889,715.264 DOT\n$191,995,398.37",
+      "36,889,715.264 DOT\n$191,995,398.37",
+      "0 DOT",
+      "18367760"
+    ],
+    [
+      "13UVJy...1UDQPi",
+      "35,759,931.393 DOT\n$186,115,350.15",
+      "0 DOT",
+      "35,759,931.393 DOT\n$186,115,350.15",
+      "7815500"
+    ],
+    [
+      "13UVJy...WZ8vTS",
+      "32,515,980.232 DOT\n$169,231,953.50",
+      "1,323,547.71 DOT\n$6,888,507.22",
+      "31,192,432.522 DOT\n$162,343,446.28",
+      "7756250"
+    ],
+    [
+      "15j4dg...LjvDCK",
+      "32,116,543.96 DOT\n$167,153,056.29",
+      "32,116,506.077 DOT\n$167,152,859.12",
+      "37.883 DOT\n$197.17",
+      "16381100"
+    ],
+    [
+      "132zsj...ZbinVK",
+      "24,116,165.783 DOT\n$125,514,464.50",
+      "24,116,165.717 DOT\n$125,514,464.15",
+      "0.066 DOT\n$0.34",
+      "17856010"
+    ],
+    [
+      "1743nD...4ipVkF",
+      "21,222,652.759 DOT\n$110,454,950.43",
+      "21,222,652.759 DOT\n$110,454,950.43",
+      "0 DOT",
+      "8434900"
+    ],
+    [
+      "14Ns6k...UfpPDJ",
+      "20,126,791.444 DOT\n$104,751,454.80",
+      "20,126,791.312 DOT\n$104,751,454.12",
+      "0.132 DOT\n$0.69",
+      "16381350"
+    ],
+    [
+      "14gAow...BRhwgc",
+      "17,401,144.403 DOT\n$90,565,612.34",
+      "17,401,124.112 DOT\n$90,565,506.73",
+      "20.291 DOT\n$105.61",
+      "17760879"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-holders-request.json b/test/e2e/fixtures/network-holders-request.json
new file mode 100644
index 00000000..8c4b1a23
--- /dev/null
+++ b/test/e2e/fixtures/network-holders-request.json
@@ -0,0 +1,123 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: AccountWhereInput, $order: [AccountOrderByInput!]!) {\n\t\t\t\taccountsConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t\tedges {\n\t\t\t\t\t\tnode {\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\tfree\n\t\t\t\t\t\t\treserved\n\t\t\t\t\t\t\ttotal\n\t\t\t\t\t\t\tupdatedAtBlock\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tpageInfo {\n\t\t\t\t\t\tendCursor\n\t\t\t\t\t\thasNextPage\n\t\t\t\t\t\thasPreviousPage\n\t\t\t\t\t\tstartCursor\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t}\n",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "order": "total_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "accountsConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "16ZL8yLyXv3V3L3z9ofR1ovFLziyXaN1DPq4yffMAZ9czzBD",
+                  "free": "741294385171453247",
+                  "reserved": "0",
+                  "total": "741294385171453247",
+                  "updatedAtBlock": 18365743
+                }
+              },
+              {
+                "node": {
+                  "id": "13UVJyLnbVp9RBZYFwFGyDvVd1y27Tt8tkntv6Q7JVPhFsTB",
+                  "free": "439881839520680554",
+                  "reserved": "0",
+                  "total": "439881839520680554",
+                  "updatedAtBlock": 18367775
+                }
+              },
+              {
+                "node": {
+                  "id": "12xtAYsRUrmbniiWQqJtECiBQrMn8AypQcXhnQAc6RB6XkLW",
+                  "free": "368897152643727530",
+                  "reserved": "0",
+                  "total": "368897152643727530",
+                  "updatedAtBlock": 18367760
+                }
+              },
+              {
+                "node": {
+                  "id": "13UVJyLnbVp77Z2t6rZ2mGqgqgyRvTu9GbDaaxonzJ1UDQPi",
+                  "free": "0",
+                  "reserved": "357599313927924796",
+                  "total": "357599313927924796",
+                  "updatedAtBlock": 7815500
+                }
+              },
+              {
+                "node": {
+                  "id": "13UVJyLnbVp77Z2t6rXwoAfLPiGe6FVeKuTYPC4T8zWZ8vTS",
+                  "free": "13235477099885044",
+                  "reserved": "311924325223691219",
+                  "total": "325159802323576263",
+                  "updatedAtBlock": 7756250
+                }
+              },
+              {
+                "node": {
+                  "id": "15j4dg5GzsL1bw2U2AWgeyAk6QTxq43V7ZPbXdAmbVLjvDCK",
+                  "free": "321165060770000001",
+                  "reserved": "378830000000",
+                  "total": "321165439600000001",
+                  "updatedAtBlock": 16381100
+                }
+              },
+              {
+                "node": {
+                  "id": "132zsjMwGjNaUXF5XjUCDs2cDEq9Qao51TsL9RSUTGZbinVK",
+                  "free": "241161657172735340",
+                  "reserved": "660000000",
+                  "total": "241161657832735340",
+                  "updatedAtBlock": 17856010
+                }
+              },
+              {
+                "node": {
+                  "id": "1743nDTMZisPgBCYSAgkUn1kVG7MePc9rvMEjoRNf4ipVkF",
+                  "free": "212226527590749654",
+                  "reserved": "0",
+                  "total": "212226527590749654",
+                  "updatedAtBlock": 8434900
+                }
+              },
+              {
+                "node": {
+                  "id": "14Ns6kKbCoka3MS4Hn6b7oRw9fFejG8RH5rq5j63cWUfpPDJ",
+                  "free": "201267913116570326",
+                  "reserved": "1320000000",
+                  "total": "201267914436570326",
+                  "updatedAtBlock": 16381350
+                }
+              },
+              {
+                "node": {
+                  "id": "14gAowz3LaAqYkRjqUZkjZUxKFUzLtN2oZJSfr3ziHBRhwgc",
+                  "free": "174011241121717378",
+                  "reserved": "202910000000",
+                  "total": "174011444031717378",
+                  "updatedAtBlock": 17760879
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-info-data.json b/test/e2e/fixtures/network-info-data.json
new file mode 100644
index 00000000..1549c152
--- /dev/null
+++ b/test/e2e/fixtures/network-info-data.json
@@ -0,0 +1,12 @@
+{
+  "header": "Polkadot",
+  "stats": [
+    "Finalized blocks\n18367749",
+    "Signed extrinsics\n14257153",
+    "Staking inflation\n7.6%",
+    "Staking rewards\n14.9%",
+    "Validators\n297/297",
+    "Nomination pools\n168"
+  ],
+  "totalIssuance": "1.383B"
+}
diff --git a/test/e2e/fixtures/network-info-request.json b/test/e2e/fixtures/network-info-request.json
new file mode 100644
index 00000000..451f0d68
--- /dev/null
+++ b/test/e2e/fixtures/network-info-request.json
@@ -0,0 +1,37 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-stats-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($filter: CurrentWhereInput, $order: [CurrentOrderByInput!]!) {\n\t\t\t\tcurrents(limit: 1, where: $filter, orderBy: $order) {\n\t\t\t\t\tchainFinalizedBlocks\n\t\t\t\t\tnominationPoolsMembersAmount\n\t\t\t\t\tnominationPoolsPoolsActiveTotalStake\n\t\t\t\t\tchainSignedExtrinsics\n\t\t\t\t\tstakingTotalStake\n\t\t\t\t\tbalancesTotalIssuance\n\t\t\t\t\tbalancesTransfersAmount\n\t\t\t\t\tstakingActiveValidatorsAmount\n\t\t\t\t\tstakingValidatorsIdealAmount\n\t\t\t\t\tstakingInflationRatio\n\t\t\t\t\tstakingRewardsRatio\n\t\t\t\t\tnominationPoolsPoolsActiveAmount\n\t\t\t\t}\n\t\t\t}\n",
+        "variables": {
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "currents": [
+            {
+              "chainFinalizedBlocks": "18367749",
+              "nominationPoolsMembersAmount": 19920,
+              "nominationPoolsPoolsActiveTotalStake": "98852033621204566",
+              "chainSignedExtrinsics": "14257153",
+              "stakingTotalStake": "7090300341891132974",
+              "balancesTotalIssuance": "13825801413636175309",
+              "balancesTransfersAmount": "12058770",
+              "stakingActiveValidatorsAmount": 297,
+              "stakingValidatorsIdealAmount": 297,
+              "stakingInflationRatio": 7.628310562090151,
+              "stakingRewardsRatio": 14.87489977397366,
+              "nominationPoolsPoolsActiveAmount": 168
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-transfers-data.json b/test/e2e/fixtures/network-transfers-data.json
new file mode 100644
index 00000000..4b31c4d8
--- /dev/null
+++ b/test/e2e/fixtures/network-transfers-data.json
@@ -0,0 +1,84 @@
+{
+  "itemsTable": [
+    [
+      "18367774-44",
+      "1CP924...zke7eT",
+      "12T1tg...RF8QDu",
+      "41.7504 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367774-44",
+      "1CP924...zke7eT",
+      "12T1tg...RF8QDu",
+      "41.7504 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367773-43",
+      "13UVJy...nzM47P",
+      "13au2b...MvJPMx",
+      "2.6945 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367773-43",
+      "13UVJy...nzM47P",
+      "13au2b...MvJPMx",
+      "2.6945 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367771-46",
+      "16HNPJ...xxL8cj",
+      "15G9wY...iaBRnk",
+      "15.7479 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367771-46",
+      "16HNPJ...xxL8cj",
+      "15G9wY...iaBRnk",
+      "15.7479 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367770-41",
+      "1qnJN7...4t8GT7",
+      "1sUVVH...5WczJ9",
+      "68.1794 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367770-41",
+      "1qnJN7...4t8GT7",
+      "1sUVVH...5WczJ9",
+      "68.1794 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367767-56",
+      "14Ak7B...3DGuQp",
+      "16KUvj...cJUeq2",
+      "50 DOT",
+      "Success",
+      ""
+    ],
+    [
+      "18367767-56",
+      "14Ak7B...3DGuQp",
+      "16KUvj...cJUeq2",
+      "50 DOT",
+      "Success",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/network-transfers-request.json b/test/e2e/fixtures/network-transfers-request.json
new file mode 100644
index 00000000..b418770e
--- /dev/null
+++ b/test/e2e/fixtures/network-transfers-request.json
@@ -0,0 +1,263 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-main-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($first: Int!, $after: String, $filter: TransferWhereInput, $order: [TransferOrderByInput!]!) {\n\t\t\ttransfersConnection(first: $first, after: $after, where: $filter, orderBy: $order) {\n\t\t\t\t...MainSquidTransfersConnection\n\t\t\t\t\n\t\t\t}\n\t\t}\n\n\t\tfragment MainSquidTransfersConnection on TransfersConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...MainSquidTransfer\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment MainSquidTransfer on Transfer {\n\t\t\t\n\tid\n\tdirection\n\taccount {\n\t\tpublicKey\n\t}\n\ttransfer {\n\t\tid\n\t\tblockNumber\n\t\ttimestamp\n\t\textrinsicHash\n\t\tto {\n\t\t\tpublicKey\n\t\t}\n\t\tfrom {\n\t\t\tpublicKey\n\t\t}\n\t\tamount\n\t\tsuccess\n\t}\n\n\t\t}\n\t",
+        "variables": {
+          "first": 10,
+          "after": null,
+          "order": "id_DESC"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "transfersConnection": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0018367774-000044-8a579-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x40139d1483af62a1ad4144815f418640fdebafabf2bc922083614fff77c97617"
+                  },
+                  "transfer": {
+                    "id": "0018367774-000044-8a579",
+                    "blockNumber": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "extrinsicHash": "0xf251791e43106af97d08a42db234a95b84df0c5f6219dfaece9181e2eda16455",
+                    "to": {
+                      "publicKey": "0x40139d1483af62a1ad4144815f418640fdebafabf2bc922083614fff77c97617"
+                    },
+                    "from": {
+                      "publicKey": "0x08ae3932858522195e117afaa5446a20d1332b232553e4d2e450a152224c3475"
+                    },
+                    "amount": "417504284900",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367774-000044-8a579-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0x08ae3932858522195e117afaa5446a20d1332b232553e4d2e450a152224c3475"
+                  },
+                  "transfer": {
+                    "id": "0018367774-000044-8a579",
+                    "blockNumber": 18367774,
+                    "timestamp": "2023-11-28T17:02:30.000000Z",
+                    "extrinsicHash": "0xf251791e43106af97d08a42db234a95b84df0c5f6219dfaece9181e2eda16455",
+                    "to": {
+                      "publicKey": "0x40139d1483af62a1ad4144815f418640fdebafabf2bc922083614fff77c97617"
+                    },
+                    "from": {
+                      "publicKey": "0x08ae3932858522195e117afaa5446a20d1332b232553e4d2e450a152224c3475"
+                    },
+                    "amount": "417504284900",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-000043-35340-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x7252b4b1f8103acd6ff363c971c7dea21afc0285ad5ad75176dd53947a6aca4b"
+                  },
+                  "transfer": {
+                    "id": "0018367773-000043-35340",
+                    "blockNumber": 18367773,
+                    "timestamp": "2023-11-28T17:02:24.001000Z",
+                    "extrinsicHash": "0x5265b954fa51ec26d64b814521fde9817745d439258b6c80145720cafb24f056",
+                    "to": {
+                      "publicKey": "0x7252b4b1f8103acd6ff363c971c7dea21afc0285ad5ad75176dd53947a6aca4b"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6e6f706c730119000000000000000000000000000000000000"
+                    },
+                    "amount": "26944721655",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367773-000043-35340-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0x6d6f646c70792f6e6f706c730119000000000000000000000000000000000000"
+                  },
+                  "transfer": {
+                    "id": "0018367773-000043-35340",
+                    "blockNumber": 18367773,
+                    "timestamp": "2023-11-28T17:02:24.001000Z",
+                    "extrinsicHash": "0x5265b954fa51ec26d64b814521fde9817745d439258b6c80145720cafb24f056",
+                    "to": {
+                      "publicKey": "0x7252b4b1f8103acd6ff363c971c7dea21afc0285ad5ad75176dd53947a6aca4b"
+                    },
+                    "from": {
+                      "publicKey": "0x6d6f646c70792f6e6f706c730119000000000000000000000000000000000000"
+                    },
+                    "amount": "26944721655",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367771-000046-b24ad-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xbc7fb612e4027e903246dfaf02492c0e5ac759e8c8ca26212a92e23ea63e9737"
+                  },
+                  "transfer": {
+                    "id": "0018367771-000046-b24ad",
+                    "blockNumber": 18367771,
+                    "timestamp": "2023-11-28T17:02:12.000000Z",
+                    "extrinsicHash": "0x653908b04b74680bb2fcf949a615a801687b026085135c29ce74f65231debce0",
+                    "to": {
+                      "publicKey": "0xbc7fb612e4027e903246dfaf02492c0e5ac759e8c8ca26212a92e23ea63e9737"
+                    },
+                    "from": {
+                      "publicKey": "0xe9a914acab00e50175920edf975fa6c45f21025651b1ba978728555276ba397a"
+                    },
+                    "amount": "157479413077",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367771-000046-b24ad-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0xe9a914acab00e50175920edf975fa6c45f21025651b1ba978728555276ba397a"
+                  },
+                  "transfer": {
+                    "id": "0018367771-000046-b24ad",
+                    "blockNumber": 18367771,
+                    "timestamp": "2023-11-28T17:02:12.000000Z",
+                    "extrinsicHash": "0x653908b04b74680bb2fcf949a615a801687b026085135c29ce74f65231debce0",
+                    "to": {
+                      "publicKey": "0xbc7fb612e4027e903246dfaf02492c0e5ac759e8c8ca26212a92e23ea63e9737"
+                    },
+                    "from": {
+                      "publicKey": "0xe9a914acab00e50175920edf975fa6c45f21025651b1ba978728555276ba397a"
+                    },
+                    "amount": "157479413077",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367770-000041-10e67-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0x267ed05100c4fb170631ffe322d744536962cd5fe10b3dbd905accbdbbce4659"
+                  },
+                  "transfer": {
+                    "id": "0018367770-000041-10e67",
+                    "blockNumber": 18367770,
+                    "timestamp": "2023-11-28T17:02:06.000000Z",
+                    "extrinsicHash": "0xf6ff10e25b0263db84dac9741a8f5f199b74d1ee2c6f8a4c1b89eff620587baf",
+                    "to": {
+                      "publicKey": "0x267ed05100c4fb170631ffe322d744536962cd5fe10b3dbd905accbdbbce4659"
+                    },
+                    "from": {
+                      "publicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+                    },
+                    "amount": "681794428900",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367770-000041-10e67-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+                  },
+                  "transfer": {
+                    "id": "0018367770-000041-10e67",
+                    "blockNumber": 18367770,
+                    "timestamp": "2023-11-28T17:02:06.000000Z",
+                    "extrinsicHash": "0xf6ff10e25b0263db84dac9741a8f5f199b74d1ee2c6f8a4c1b89eff620587baf",
+                    "to": {
+                      "publicKey": "0x267ed05100c4fb170631ffe322d744536962cd5fe10b3dbd905accbdbbce4659"
+                    },
+                    "from": {
+                      "publicKey": "0x2534454d30f8a028e42654d6b535e0651d1d026ddf115cef59ae1dd71bae074e"
+                    },
+                    "amount": "681794428900",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367767-000056-6b701-to",
+                  "direction": "To",
+                  "account": {
+                    "publicKey": "0xeb4597de545640dfa4455d12413bb645989526fc40a71a380a0b998c42188a21"
+                  },
+                  "transfer": {
+                    "id": "0018367767-000056-6b701",
+                    "blockNumber": 18367767,
+                    "timestamp": "2023-11-28T17:01:48.000000Z",
+                    "extrinsicHash": "0xb12b133960367b245a999cf0bb528e88776b2df0300d1c4a8a840f5f447f6eb5",
+                    "to": {
+                      "publicKey": "0xeb4597de545640dfa4455d12413bb645989526fc40a71a380a0b998c42188a21"
+                    },
+                    "from": {
+                      "publicKey": "0x8c2304b59509cab2b4f350d4e49fc9ca4b9db14d766c8275f0683c06dd849bc6"
+                    },
+                    "amount": "500000000000",
+                    "success": true
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0018367767-000056-6b701-from",
+                  "direction": "From",
+                  "account": {
+                    "publicKey": "0x8c2304b59509cab2b4f350d4e49fc9ca4b9db14d766c8275f0683c06dd849bc6"
+                  },
+                  "transfer": {
+                    "id": "0018367767-000056-6b701",
+                    "blockNumber": 18367767,
+                    "timestamp": "2023-11-28T17:01:48.000000Z",
+                    "extrinsicHash": "0xb12b133960367b245a999cf0bb528e88776b2df0300d1c4a8a840f5f447f6eb5",
+                    "to": {
+                      "publicKey": "0xeb4597de545640dfa4455d12413bb645989526fc40a71a380a0b998c42188a21"
+                    },
+                    "from": {
+                      "publicKey": "0x8c2304b59509cab2b4f350d4e49fc9ca4b9db14d766c8275f0683c06dd849bc6"
+                    },
+                    "amount": "500000000000",
+                    "success": true
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-account-encoded-address-accounts-data.json b/test/e2e/fixtures/search-multiple-by-account-encoded-address-accounts-data.json
new file mode 100644
index 00000000..294f4f36
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-account-encoded-address-accounts-data.json
@@ -0,0 +1,13 @@
+{
+  "itemsCount": "(2)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg"
+    ],
+    [
+      "Statemine",
+      "EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-account-public-key-accounts-data.json b/test/e2e/fixtures/search-multiple-by-account-public-key-accounts-data.json
new file mode 100644
index 00000000..f9897103
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-account-public-key-accounts-data.json
@@ -0,0 +1,17 @@
+{
+  "itemsCount": "(3)",
+  "itemsTable": [
+    [
+      "Acala",
+      "22ZfBUL7hnoh1UUUpRVkWZrqgnscgCBwtF4kfJJShQeo94eM"
+    ],
+    [
+      "Kusama",
+      "EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg"
+    ],
+    [
+      "Polkadot",
+      "12h4bYv5rt4RStRqm6hWjZCbDwSg8MtjzqXSWTsS4rhvKyEC"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-block-hash-request.json b/test/e2e/fixtures/search-multiple-by-block-hash-request.json
new file mode 100644
index 00000000..b7ff0023
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-block-hash-request.json
@@ -0,0 +1,158 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-aff52",
+                  "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                  "height": 123,
+                  "timestamp": "2019-11-28T17:40:42.000000Z",
+                  "parentHash": "0x44047e1fc53d94a3b0bbc4189693cdbccc8c639efea42801717d65c0a5d847bd",
+                  "validator": "0xfcdeb580add093f3b5f06603032c2fe89d329ba372147c100aa0391a44a51601",
+                  "specVersion": 1020
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-block-height-blocks-data.json b/test/e2e/fixtures/search-multiple-by-block-height-blocks-data.json
new file mode 100644
index 00000000..28fb4d2f
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-block-height-blocks-data.json
@@ -0,0 +1,27 @@
+{
+  "itemsCount": "(3)",
+  "itemsTable": [
+    [
+      "Acala",
+      "123",
+      "2000",
+      "211oiN...RxEymL",
+      ""
+    ],
+    [
+      "Kusama",
+      "123",
+      "1020",
+      "JHsk47...G4rM8M",
+      ""
+    ],
+    [
+      "Polkadot",
+      "123",
+      "0",
+      "146YJH...66vhMS",
+      ""
+    ]
+  ],
+  "error": "Unexpected error occured while searching some networks.This error is logged. No need to report it.DetailsAcala: blocks error\n\nKusama: blocks error\n\nPolkadot: blocks error"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-block-height-data.json b/test/e2e/fixtures/search-multiple-by-block-height-data.json
new file mode 100644
index 00000000..3e47f083
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-block-height-data.json
@@ -0,0 +1,3 @@
+{
+  "notFound": "Nothing was found"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-block-height-request.json b/test/e2e/fixtures/search-multiple-by-block-height-request.json
new file mode 100644
index 00000000..11d70acf
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-block-height-request.json
@@ -0,0 +1,131 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($blocksFilter: BlockWhereInput) {\n\t\t\tblocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFilter": {
+            "height_eq": 123
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-ba7ac",
+                  "hash": "0xba7acee2e2fe4ced01fccf638bdeb7404f902c89f7f5b0d2372c62cf8beaff35",
+                  "height": 123,
+                  "timestamp": "2020-05-26T15:49:24.000000Z",
+                  "parentHash": "0xf751938b38d08085d0927d81ff07f7646b79a28cac5956302095699da241e06a",
+                  "validator": "0x88ee494d719d68a18aade04903839ea37b6be99552ceceb530674b237afa9166",
+                  "specVersion": 0
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($blocksFilter: BlockWhereInput) {\n\t\t\tblocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFilter": {
+            "height_eq": 123
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-c9c16",
+                  "hash": "0xc9c16c1adb632457a876e5c6a8b810e54a485748fd813de487b0f473a4cad5f0",
+                  "height": 123,
+                  "timestamp": "2021-12-18T04:05:48.669000Z",
+                  "parentHash": "0x90bafcb68711d45b563d95e7a57a85100d4280cc83b573bc33391b1b64a3518e",
+                  "validator": "0x0642caac4bb7be8367c277371825e1314be4ec99d9a0d0e2ed12289693009a6f",
+                  "specVersion": 2000
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($blocksFilter: BlockWhereInput) {\n\t\t\tblocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFilter": {
+            "height_eq": 123
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-aff52",
+                  "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                  "height": 123,
+                  "timestamp": "2019-11-28T17:40:42.000000Z",
+                  "parentHash": "0x44047e1fc53d94a3b0bbc4189693cdbccc8c639efea42801717d65c0a5d847bd",
+                  "validator": "0xfcdeb580add093f3b5f06603032c2fe89d329ba372147c100aa0391a44a51601",
+                  "specVersion": 1020
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-extrinsic-hash-extrinsics-data.json b/test/e2e/fixtures/search-multiple-by-extrinsic-hash-extrinsics-data.json
new file mode 100644
index 00000000..971fb24f
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-extrinsic-hash-extrinsics-data.json
@@ -0,0 +1,13 @@
+{
+  "itemsCount": "(5,463,704)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "3,860,281 extrinsics found. View"
+    ],
+    [
+      "Polkadot",
+      "1,603,423 extrinsics found. View"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-extrinsic-hash-request.json b/test/e2e/fixtures/search-multiple-by-extrinsic-hash-request.json
new file mode 100644
index 00000000..70789e10
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-extrinsic-hash-request.json
@@ -0,0 +1,797 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000001-000001-cd9b8",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000001-cd9b8",
+                    "hash": "0xcd9b8e2fc2f57c4570a86319b005832080e0c478ab41ae5d44e23705872f5ad3",
+                    "height": 1,
+                    "timestamp": "2019-11-28T17:27:54.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000002-000001-2df84",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000002-2df84",
+                    "hash": "0x2df84d4c6bb8441f7a1702b4589dc33f8dc43a0794a4df446c74110636456989",
+                    "height": 2,
+                    "timestamp": "2019-11-28T17:28:12.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000003-000001-f7a0f",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000003-f7a0f",
+                    "hash": "0xf7a0f6566a545db4792422a59265de5ff2e7d4e0f96ec8e30f6f24b9b1832aa7",
+                    "height": 3,
+                    "timestamp": "2019-11-28T17:28:24.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000004-000001-b074c",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000004-b074c",
+                    "hash": "0xb074c86032758737e70d8eabbe1b829a37c4024fbe65ec4a96fee77589b58a10",
+                    "height": 4,
+                    "timestamp": "2019-11-28T17:28:36.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000005-000001-501ff",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000005-501ff",
+                    "hash": "0x501fffcb4032defe9254bad63fe528fb9b435932590d7dbcdecd958f91b334ed",
+                    "height": 5,
+                    "timestamp": "2019-11-28T17:28:42.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000006-000002-b5ee5",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000006-b5ee5",
+                    "hash": "0xb5ee550d20a55b76adeba7149516d367ac7cbdd95cd0864a8753d6b5dd02d3bb",
+                    "height": 6,
+                    "timestamp": "2019-11-28T17:28:48.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000007-000001-1ef1d",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000007-1ef1d",
+                    "hash": "0x1ef1d331c49d94ee8695924e4a46806ecffb6c955257299a235b737edbea0f98",
+                    "height": 7,
+                    "timestamp": "2019-11-28T17:28:54.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000008-000002-fbfdb",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000008-fbfdb",
+                    "hash": "0xfbfdb378ec1701a7fd1beae3c88425b2452e7799107005f678d0e68fadc4eb14",
+                    "height": 8,
+                    "timestamp": "2019-11-28T17:29:06.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000009-000001-052d4",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000009-052d4",
+                    "hash": "0x052d472a8a29fda9b238d9ecc1ba43775ea596f74eac77c0b5d10bea13edf802",
+                    "height": 9,
+                    "timestamp": "2019-11-28T17:29:18.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000010-000002-1011c",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000010-1011c",
+                    "hash": "0x1011c6643b146259206cd0a22bc00f73143d34f3301875a92bdd96a7e362337f",
+                    "height": 10,
+                    "timestamp": "2019-11-28T17:29:24.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 3860281
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000001-000001-c0096",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000001-c0096",
+                    "hash": "0xc0096358534ec8d21d01d34b836eed476a1c343f8724fa2153dc0725ad797a90",
+                    "height": 1,
+                    "timestamp": "2020-05-26T15:36:18.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000002-000001-409d0",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000002-409d0",
+                    "hash": "0x409d0bfe677594d7558101d574633d5808a6fc373cbd964ef236f00941f290ee",
+                    "height": 2,
+                    "timestamp": "2020-05-26T15:36:48.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000003-000001-5b940",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000003-5b940",
+                    "hash": "0x5b940c7fc0a1c5a58e4d80c5091dd003303b8f18e90a989f010c1be6f392bed1",
+                    "height": 3,
+                    "timestamp": "2020-05-26T15:36:54.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000004-000001-d380b",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000004-d380b",
+                    "hash": "0xd380bee22de487a707cbda65dd9d4e2188f736908c42cf390c8919d4f7fc547c",
+                    "height": 4,
+                    "timestamp": "2020-05-26T15:37:00.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000005-000001-68a27",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000005-68a27",
+                    "hash": "0x68a27df5a52ff2251df2cc8368f7dcefb305a13bb3d89b65c8fb070f23877f2c",
+                    "height": 5,
+                    "timestamp": "2020-05-26T15:37:18.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000006-000001-8d4ea",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000006-8d4ea",
+                    "hash": "0x8d4ea2ea4e834faa1ed492f66f0b28ea56fc9061b7e89623114968e2cf59987a",
+                    "height": 6,
+                    "timestamp": "2020-05-26T15:37:35.999000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000007-000001-180fd",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000007-180fd",
+                    "hash": "0x180fdbdfdb922a2ed8211eefabbe125ba1a09b0f65cf0aab0a567ae7b58dd61c",
+                    "height": 7,
+                    "timestamp": "2020-05-26T15:37:42.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000008-000001-84572",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000008-84572",
+                    "hash": "0x84572c52f9073b6042720c1c1e31fc7672a86f716e22447793432adc43b43fe5",
+                    "height": 8,
+                    "timestamp": "2020-05-26T15:37:54.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000009-000002-acae1",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000009-acae1",
+                    "hash": "0xacae11a67c581303fc1e9ff67e8088ba1cede475f04c494166311451ecf2993e",
+                    "height": 9,
+                    "timestamp": "2020-05-26T15:38:00.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000010-000002-ab5c9",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000010-ab5c9",
+                    "hash": "0xab5c9230a7dde8bb90a6728ba4a0165423294dac14336b1443f865b796ff682c",
+                    "height": 10,
+                    "timestamp": "2020-05-26T15:38:06.000000Z",
+                    "specVersion": 0
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1603423
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-000000-aff52",
+                  "extrinsicHash": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701",
+                  "block": {
+                    "id": "0000000123-aff52",
+                    "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                    "height": 123,
+                    "timestamp": "2019-11-28T17:40:42.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-name-events-data.json b/test/e2e/fixtures/search-multiple-by-name-events-data.json
new file mode 100644
index 00000000..66718479
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-name-events-data.json
@@ -0,0 +1,17 @@
+{
+  "itemsCount": "(17,542,236)",
+  "itemsTable": [
+    [
+      "Acala",
+      "2,860,350 events found. View"
+    ],
+    [
+      "Kusama",
+      "2,630,782 events found. View"
+    ],
+    [
+      "Polkadot",
+      "12,051,104 events found. View"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-name-extrinsics-data.json b/test/e2e/fixtures/search-multiple-by-name-extrinsics-data.json
new file mode 100644
index 00000000..dd34d2ea
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-name-extrinsics-data.json
@@ -0,0 +1,17 @@
+{
+  "itemsCount": "(11,076,356)",
+  "itemsTable": [
+    [
+      "Acala",
+      "566,680 extrinsics found. View"
+    ],
+    [
+      "Kusama",
+      "5,366,557 extrinsics found. View"
+    ],
+    [
+      "Polkadot",
+      "5,143,119 extrinsics found. View"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-name-request.json b/test/e2e/fixtures/search-multiple-by-name-request.json
new file mode 100644
index 00000000..5b92721f
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-name-request.json
@@ -0,0 +1,80 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances.transfer",
+          "eventsByNameCounterId": "Events.Balances.Transfer"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 5143119
+          },
+          "eventsByNameCounter": {
+            "total": 12051104
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances.transfer",
+          "eventsByNameCounterId": "Events.Balances.Transfer"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 5366557
+          },
+          "eventsByNameCounter": {
+            "total": 2630782
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances.transfer",
+          "eventsByNameCounterId": "Events.Balances.Transfer"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 566680
+          },
+          "eventsByNameCounter": {
+            "total": 2860350
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-pallet-events-data.json b/test/e2e/fixtures/search-multiple-by-pallet-events-data.json
new file mode 100644
index 00000000..59b44382
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-pallet-events-data.json
@@ -0,0 +1,17 @@
+{
+  "itemsCount": "(146,137,134)",
+  "itemsTable": [
+    [
+      "Acala",
+      "10,153,648 events found. View"
+    ],
+    [
+      "Kusama",
+      "67,248,860 events found. View"
+    ],
+    [
+      "Polkadot",
+      "68,734,626 events found. View"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-pallet-extrinsics-data.json b/test/e2e/fixtures/search-multiple-by-pallet-extrinsics-data.json
new file mode 100644
index 00000000..19ae0411
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-pallet-extrinsics-data.json
@@ -0,0 +1,17 @@
+{
+  "itemsCount": "(15,361,925)",
+  "itemsTable": [
+    [
+      "Acala",
+      "770,508 extrinsics found. View"
+    ],
+    [
+      "Kusama",
+      "5,942,155 extrinsics found. View"
+    ],
+    [
+      "Polkadot",
+      "8,649,262 extrinsics found. View"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-multiple-by-pallet-request.json b/test/e2e/fixtures/search-multiple-by-pallet-request.json
new file mode 100644
index 00000000..b9c703a1
--- /dev/null
+++ b/test/e2e/fixtures/search-multiple-by-pallet-request.json
@@ -0,0 +1,80 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances",
+          "eventsByNameCounterId": "Events.Balances"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 5942155
+          },
+          "eventsByNameCounter": {
+            "total": 67248860
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-acala/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances",
+          "eventsByNameCounterId": "Events.Balances"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 770508
+          },
+          "eventsByNameCounter": {
+            "total": 10153648
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-polkadot/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances",
+          "eventsByNameCounterId": "Events.Balances"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 8649262
+          },
+          "eventsByNameCounter": {
+            "total": 68734626
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-block-hash-request.json b/test/e2e/fixtures/search-single-by-block-hash-request.json
new file mode 100644
index 00000000..71afa924
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-block-hash-request.json
@@ -0,0 +1,62 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-aff52",
+                  "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                  "height": 123,
+                  "timestamp": "2019-11-28T17:40:42.000000Z",
+                  "parentHash": "0x44047e1fc53d94a3b0bbc4189693cdbccc8c639efea42801717d65c0a5d847bd",
+                  "validator": "0xfcdeb580add093f3b5f06603032c2fe89d329ba372147c100aa0391a44a51601",
+                  "specVersion": 1020
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          },
+          "extrinsics": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-block-height-data.json b/test/e2e/fixtures/search-single-by-block-height-data.json
new file mode 100644
index 00000000..3e47f083
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-block-height-data.json
@@ -0,0 +1,3 @@
+{
+  "notFound": "Nothing was found"
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-block-height-request.json b/test/e2e/fixtures/search-single-by-block-height-request.json
new file mode 100644
index 00000000..35c3f5be
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-block-height-request.json
@@ -0,0 +1,45 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query ($blocksFilter: BlockWhereInput) {\n\t\t\tblocks: blocksConnection(first: 1, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFilter": {
+            "height_eq": 123
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-aff52",
+                  "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                  "height": 123,
+                  "timestamp": "2019-11-28T17:40:42.000000Z",
+                  "parentHash": "0x44047e1fc53d94a3b0bbc4189693cdbccc8c639efea42801717d65c0a5d847bd",
+                  "validator": "0xfcdeb580add093f3b5f06603032c2fe89d329ba372147c100aa0391a44a51601",
+                  "specVersion": 1020
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-extrinsic-hash-extrinsics-data.json b/test/e2e/fixtures/search-single-by-extrinsic-hash-extrinsics-data.json
new file mode 100644
index 00000000..d2ba7ec7
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-extrinsic-hash-extrinsics-data.json
@@ -0,0 +1,75 @@
+{
+  "itemsCount": "(3,860,281)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "1-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "2-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "3-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "4-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "5-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "6-2",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "7-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "8-2",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "9-1",
+      "Parachains.set_heads",
+      "",
+      ""
+    ],
+    [
+      "Kusama",
+      "10-2",
+      "Parachains.set_heads",
+      "",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-extrinsic-hash-request.json b/test/e2e/fixtures/search-single-by-extrinsic-hash-request.json
new file mode 100644
index 00000000..5d0da706
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-extrinsic-hash-request.json
@@ -0,0 +1,364 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000001-000001-cd9b8",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000001-cd9b8",
+                    "hash": "0xcd9b8e2fc2f57c4570a86319b005832080e0c478ab41ae5d44e23705872f5ad3",
+                    "height": 1,
+                    "timestamp": "2019-11-28T17:27:54.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000002-000001-2df84",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000002-2df84",
+                    "hash": "0x2df84d4c6bb8441f7a1702b4589dc33f8dc43a0794a4df446c74110636456989",
+                    "height": 2,
+                    "timestamp": "2019-11-28T17:28:12.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000003-000001-f7a0f",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000003-f7a0f",
+                    "hash": "0xf7a0f6566a545db4792422a59265de5ff2e7d4e0f96ec8e30f6f24b9b1832aa7",
+                    "height": 3,
+                    "timestamp": "2019-11-28T17:28:24.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000004-000001-b074c",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000004-b074c",
+                    "hash": "0xb074c86032758737e70d8eabbe1b829a37c4024fbe65ec4a96fee77589b58a10",
+                    "height": 4,
+                    "timestamp": "2019-11-28T17:28:36.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000005-000001-501ff",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000005-501ff",
+                    "hash": "0x501fffcb4032defe9254bad63fe528fb9b435932590d7dbcdecd958f91b334ed",
+                    "height": 5,
+                    "timestamp": "2019-11-28T17:28:42.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000006-000002-b5ee5",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000006-b5ee5",
+                    "hash": "0xb5ee550d20a55b76adeba7149516d367ac7cbdd95cd0864a8753d6b5dd02d3bb",
+                    "height": 6,
+                    "timestamp": "2019-11-28T17:28:48.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000007-000001-1ef1d",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000007-1ef1d",
+                    "hash": "0x1ef1d331c49d94ee8695924e4a46806ecffb6c955257299a235b737edbea0f98",
+                    "height": 7,
+                    "timestamp": "2019-11-28T17:28:54.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000008-000002-fbfdb",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000008-fbfdb",
+                    "hash": "0xfbfdb378ec1701a7fd1beae3c88425b2452e7799107005f678d0e68fadc4eb14",
+                    "height": 8,
+                    "timestamp": "2019-11-28T17:29:06.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000009-000001-052d4",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000009-052d4",
+                    "hash": "0x052d472a8a29fda9b238d9ecc1ba43775ea596f74eac77c0b5d10bea13edf802",
+                    "height": 9,
+                    "timestamp": "2019-11-28T17:29:18.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 1,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0000000010-000002-1011c",
+                  "extrinsicHash": "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d",
+                  "block": {
+                    "id": "0000000010-1011c",
+                    "hash": "0x1011c6643b146259206cd0a22bc00f73143d34f3301875a92bdd96a7e362337f",
+                    "height": 10,
+                    "timestamp": "2019-11-28T17:29:24.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set_heads",
+                    "palletName": "Parachains"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 3860281
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$blocksFirst: Int!,\n\t\t\t$blocksAfter: String,\n\t\t\t$blocksFilter: BlockWhereInput,\n\t\t\t$extrinsicsFirst: Int!,\n\t\t\t$extrinsicsAfter: String,\n\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t) {\n\t\t\tblocks: blocksConnection(first: $blocksFirst, after: $blocksAfter, where: $blocksFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidBlocksConnection\n\t\t\t\ttotalCount\n\t\t\t},\n\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_ASC) {\n\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\ttotalCount\n\t\t\t}\n\t\t}\n\n\t\tfragment ExplorerSquidBlocksConnection on BlocksConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidBlock\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidBlock on Block {\n\t\t\t\n\tid\n\thash\n\theight\n\ttimestamp\n\tparentHash\n\tvalidator\n\tspecVersion\n\n\t\t}\n\t",
+        "variables": {
+          "blocksFirst": 10,
+          "blocksAfter": null,
+          "blocksFilter": {
+            "hash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          },
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "extrinsicHash_eq": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "blocks": {
+            "edges": [],
+            "pageInfo": {
+              "endCursor": "",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": ""
+            },
+            "totalCount": 0
+          },
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0000000123-000000-aff52",
+                  "extrinsicHash": "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701",
+                  "block": {
+                    "id": "0000000123-aff52",
+                    "hash": "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211",
+                    "height": 123,
+                    "timestamp": "2019-11-28T17:40:42.000000Z",
+                    "specVersion": 1020
+                  },
+                  "mainCall": {
+                    "callName": "set",
+                    "palletName": "Timestamp"
+                  },
+                  "indexInBlock": 0,
+                  "success": true,
+                  "tip": null,
+                  "fee": null,
+                  "signerPublicKey": null,
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "1",
+              "hasNextPage": false,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            },
+            "totalCount": 1
+          }
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-name-events-data.json b/test/e2e/fixtures/search-single-by-name-events-data.json
new file mode 100644
index 00000000..e8aad8f4
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-name-events-data.json
@@ -0,0 +1,75 @@
+{
+  "itemsCount": "(2,630,785)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "20744557-40",
+      "Balances.Transfer",
+      "20744557-3",
+      "Parsed\nRaw\namount\n\t\n3000000000000\n\n\nfrom\n\t\nF3opxRbN5ZavB4LTn2JmBMfUKxWH6jFyT8xJtruPxuZm5a8\n\n\nto\n\t\nH9ScqCNcWBjHsEnQpbE5znxFgnw1UFCotqBpUn76N2xLwJu"
+    ],
+    [
+      "Kusama",
+      "20744545-48",
+      "Balances.Transfer",
+      "20744545-5",
+      "Parsed\nRaw\namount\n\t\n50000000000\n\n\nfrom\n\t\nHmydEK9XusySjw4gW6U98YMhehzL6CsCvpiWdPtfn9DjAk1\n\n\nto\n\t\nJ7Lf2DUyJ3br87QYF9TtbbGQt1pRe9K7gCxofwBUyfvC3mf"
+    ],
+    [
+      "Kusama",
+      "20744535-40",
+      "Balances.Transfer",
+      "20744535-2",
+      "Parsed\nRaw\namount\n\t\n9475837844\n\n\nfrom\n\t\nFjyPzqCQJP7vXMzHDvkjE6d9ncHtHz3FzcKouCv8SFXtVGd\n\n\nto\n\t\nGMu4FmM9DhHj86G18EVVqd7oueXnqqvF5okREkvMv45xCqK"
+    ],
+    [
+      "Kusama",
+      "20744475-41",
+      "Balances.Transfer",
+      "20744475-4",
+      "Parsed\nRaw\namount\n\t\n9475837844\n\n\nfrom\n\t\nDErZ7i6KVpRWFp2B4HyEce4wUsZ5gqTddmpkeRMFK9AA4dw\n\n\nto\n\t\nGMu4FmM9DhHj86G18EVVqd7oueXnqqvF5okREkvMv45xCqK"
+    ],
+    [
+      "Kusama",
+      "20744463-41",
+      "Balances.Transfer",
+      "20744463-4",
+      "Parsed\nRaw\namount\n\t\n103439138250191\n\n\nfrom\n\t\nFrMXVDdLWWQWYuJcaedxbjpvchyKjfqjRRZGiYEXG9j5DMP\n\n\nto\n\t\nG9RjjYpSaAD2uEacsFLbspPVNxGg8UDGpcAMJXu4tNK3bZp"
+    ],
+    [
+      "Kusama",
+      "20744456-39",
+      "Balances.Transfer",
+      "20744456-2",
+      "Parsed\nRaw\namount\n\t\n15000000000000\n\n\nfrom\n\t\nF2BFj9hj9ohVRimaoNvcGTvzWuuvuD3ZyFzcBeKPUSKzfsM\n\n\nto\n\t\nGeLKz1ewyr9PoKZspon6GY2haVeuR8nGLsgNswx95167LyR"
+    ],
+    [
+      "Kusama",
+      "20744451-40",
+      "Balances.Transfer",
+      "20744451-2",
+      "Parsed\nRaw\namount\n\t\n2632282320000\n\n\nfrom\n\t\nFLoAMCohsfY1AYMZ3iRq3jX9SF8z1H8Z7EZKXag5wAbBqdp\n\n\nto\n\t\nFPvFC39iK5ENE9XXupskU8WM9v35oG2j7AacqATiq7wknGJ"
+    ],
+    [
+      "Kusama",
+      "20744445-39",
+      "Balances.Transfer",
+      "20744445-2",
+      "Parsed\nRaw\namount\n\t\n1191158170000\n\n\nfrom\n\t\nEwvNG5fak812wn9fNCa8gi37jNek7ejy5Js1mHBpLWQhx3E\n\n\nto\n\t\nFVsKb8gChUych3h54jXiysxHuZdAK513x7QPYcHNcEdG6RD"
+    ],
+    [
+      "Kusama",
+      "20744425-39",
+      "Balances.Transfer",
+      "20744425-2",
+      "Parsed\nRaw\namount\n\t\n2632882320000\n\n\nfrom\n\t\nEwsehEPVc2Jx8LXgYHDboccQvNxAg2BN1t3pY3B7iK28RBm\n\n\nto\n\t\nFLoAMCohsfY1AYMZ3iRq3jX9SF8z1H8Z7EZKXag5wAbBqdp"
+    ],
+    [
+      "Kusama",
+      "20744415-40",
+      "Balances.Transfer",
+      "20744415-2",
+      "Parsed\nRaw\namount\n\t\n9472504514\n\n\nfrom\n\t\nDSmTrqUMd2aEw4tmFRPhFs7o5YHN4qhoRpao7NMHt9LeZ2b\n\n\nto\n\t\nGMu4FmM9DhHj86G18EVVqd7oueXnqqvF5okREkvMv45xCqK"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-name-extrinsics-data.json b/test/e2e/fixtures/search-single-by-name-extrinsics-data.json
new file mode 100644
index 00000000..39bb9388
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-name-extrinsics-data.json
@@ -0,0 +1,75 @@
+{
+  "itemsCount": "(5,366,558)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "20744535-2",
+      "Balances.transfer",
+      "FjyPzq...FXtVGd",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744475-4",
+      "Balances.transfer",
+      "DErZ7i...9AA4dw",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744415-2",
+      "Balances.transfer",
+      "DSmTrq...9LeZ2b",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744215-2",
+      "Balances.transfer",
+      "Du8sid...8FVmPk",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744146-8",
+      "Balances.transfer",
+      "Dtzrxm...5xCUj8",
+      ""
+    ],
+    [
+      "Kusama",
+      "20743991-2",
+      "Balances.transfer",
+      "Dtzrxm...5xCUj8",
+      ""
+    ],
+    [
+      "Kusama",
+      "20743958-5",
+      "Balances.transfer",
+      "GkmbHW...tarEvN",
+      ""
+    ],
+    [
+      "Kusama",
+      "20743855-2",
+      "Balances.transfer",
+      "F9ktS4...8fueZZ",
+      ""
+    ],
+    [
+      "Kusama",
+      "20743683-2",
+      "Balances.transfer",
+      "Dtzrxm...5xCUj8",
+      ""
+    ],
+    [
+      "Kusama",
+      "20743618-2",
+      "Balances.transfer",
+      "Ft5hSj...DH21xL",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-name-request.json b/test/e2e/fixtures/search-single-by-name-request.json
new file mode 100644
index 00000000..e4f42ba5
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-name-request.json
@@ -0,0 +1,632 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances.transfer",
+          "eventsByNameCounterId": "Events.Balances.Transfer"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 5366558
+          },
+          "eventsByNameCounter": {
+            "total": 2630785
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t\t$extrinsicsFirst: Int!,\n\t\t\t\t$extrinsicsAfter: String,\n\t\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t\t\t$eventsFirst: Int!,\n\t\t\t\t$eventsAfter: String,\n\t\t\t\t$eventsFilter: EventWhereInput,\n\t\t\t) {\n\t\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_DESC) {\n\t\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\t}\n\t\t\t\tevents: eventsConnection(first: $eventsFirst, after: $eventsAfter, where: $eventsFilter, orderBy: id_DESC) {\n\t\t\t\t\t...ExplorerSquidEventsConnection\n\t\t\t\t}\n\t\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEventsConnection on EventsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "mainCall": {
+              "palletName_eq": "Balances",
+              "callName_eq": "transfer"
+            }
+          },
+          "eventsFirst": 10,
+          "eventsAfter": null,
+          "eventsFilter": {
+            "palletName_eq": "Balances",
+            "eventName_eq": "Transfer"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0020744535-000002-c41cc",
+                  "extrinsicHash": "0xfb3279947a05a87bf60cc75b31d0d9e2b2ad8ac31a8d0c86ed272cee295a2848",
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "hash": "0xc41cc511028cebbcbf81af350953a1c604fe98cfb376f164645356b93ccb3bfc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744475-000004-96dab",
+                  "extrinsicHash": "0xf73064de4bf1b6b71e9629cbf763ed90131fa2223e71a704bbe62a6cce8ef764",
+                  "block": {
+                    "id": "0020744475-96dab",
+                    "hash": "0x96dab4c7e41357981f7e454c21acbe2fa0939706fb17a90b106621a71888fc6a",
+                    "height": 20744475,
+                    "timestamp": "2023-11-27T20:35:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x1d63cdebbb0552547bb5086658d504292e7597e49734943bc95d573ef5fa97a9",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744415-000002-ca461",
+                  "extrinsicHash": "0xd9cf36ede38866b900529b5fd7262745c2aaa523c95f2d8894008d61f7ec6855",
+                  "block": {
+                    "id": "0020744415-ca461",
+                    "hash": "0xca461a94e6dd21a9b27e06efb28103a93220d66290ea640bfaaf9d2a7811c626",
+                    "height": 20744415,
+                    "timestamp": "2023-11-27T20:29:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x26799cd6900a727b7987d751e7623aec74ddf018d0f606a6aa2cfb086747485a",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744215-000002-a8835",
+                  "extrinsicHash": "0x2996854dd254e880ed8cf95413bc84e5aa9a06e6328f585c4e8ad27a6fe78208",
+                  "block": {
+                    "id": "0020744215-a8835",
+                    "hash": "0xa8835f595f7e6256609a920f452c88e7adf019cab68fbd62d86b4a59f3dc824b",
+                    "height": 20744215,
+                    "timestamp": "2023-11-27T20:09:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x3a9611f9028e0a0db1c59dfbcd568dc58b459c2225ea9d76a775cf3d1d644afa",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744146-000008-be02d",
+                  "extrinsicHash": "0xe21fd2d41f30f5fa848e40b4d9fa41074cd03532e5f8d2728130a5b7221037ed",
+                  "block": {
+                    "id": "0020744146-be02d",
+                    "hash": "0xbe02d0cc8ff46db4cf864eb23832050180e00985caf2bfa10b8da1c0c19c6668",
+                    "height": 20744146,
+                    "timestamp": "2023-11-27T20:02:12.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 8,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "531120329",
+                  "signerPublicKey": "0x3a7b188d341fcd76ffdc8e684ac26c1e0720e35ca01b3f7c2308c3bde14571c2",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020743991-000002-13c9b",
+                  "extrinsicHash": "0xd23e5ff8c0b0515113bc44dd591d5942df125ca16740cc73ca95bb0e9a42c193",
+                  "block": {
+                    "id": "0020743991-13c9b",
+                    "hash": "0x13c9b14be9fa267a14cf23f2c81a2814ce90f052da38e9b67c6e99aae9388ddc",
+                    "height": 20743991,
+                    "timestamp": "2023-11-27T19:46:42.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "527786999",
+                  "signerPublicKey": "0x3a7b188d341fcd76ffdc8e684ac26c1e0720e35ca01b3f7c2308c3bde14571c2",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020743958-000005-60c06",
+                  "extrinsicHash": "0x41c4a0c39066d29380b7f1159ae4516f6191ae10b3a095214aa56d3662b8f61b",
+                  "block": {
+                    "id": "0020743958-60c06",
+                    "hash": "0x60c0651f32fdda5a985d9de32871cc2f50d05c0a6720921877d9255163e3760e",
+                    "height": 20743958,
+                    "timestamp": "2023-11-27T19:43:24.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 5,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0xb8e92947886d50db29282175340b067fde917bed4030e2bf72e87726ed0aa601",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020743855-000002-e0a63",
+                  "extrinsicHash": "0xe518994650ec4630cb5e05334ca1286a29b59d90215c6446357565789ab6d4e9",
+                  "block": {
+                    "id": "0020743855-e0a63",
+                    "hash": "0xe0a63b67feb5897eda7115cf980105b7a6570567fdf18d16423ea15dd7c1210b",
+                    "height": 20743855,
+                    "timestamp": "2023-11-27T19:33:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x71f8f7b3982fbd3d4281d486a7c8713e670b480cb9deff2ce0b250acccf784ca",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020743683-000002-c0990",
+                  "extrinsicHash": "0x5b3ba7ff379eb13d0820ecdf28cf53d8bd7cb999a09f65ad63c3d328af8ab85a",
+                  "block": {
+                    "id": "0020743683-c0990",
+                    "hash": "0xc09906b9a2c3309fe57df5bd71464922a68f76cb3ca3c762a698717bcea8d679",
+                    "height": 20743683,
+                    "timestamp": "2023-11-27T19:15:54.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "527786999",
+                  "signerPublicKey": "0x3a7b188d341fcd76ffdc8e684ac26c1e0720e35ca01b3f7c2308c3bde14571c2",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020743618-000002-d2332",
+                  "extrinsicHash": "0x5a87e8190602da59e9943ce18b3f8d345be98fa5b92b40b89d2d0ace96505c33",
+                  "block": {
+                    "id": "0020743618-d2332",
+                    "hash": "0xd2332a9742f8be1a329062d19952c4d7e273ec551f3aa0a74bf7b54ed52bfba0",
+                    "height": 20743618,
+                    "timestamp": "2023-11-27T19:09:24.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "531120329",
+                  "signerPublicKey": "0x924098b42f53fc9f5910673db6bc44396bbb8f1c9486d483e1c543bf63422d31",
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          },
+          "events": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0020744557-000040-ad5b9",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 40,
+                  "block": {
+                    "id": "0020744557-ad5b9",
+                    "height": 20744557,
+                    "timestamp": "2023-11-27T20:43:18.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744557-000003-ad5b9"
+                  },
+                  "call": {
+                    "id": "0020744557-000003-ad5b9"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744545-000048-90414",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 48,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000040-c41cc",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 40,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744475-000041-96dab",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 41,
+                  "block": {
+                    "id": "0020744475-96dab",
+                    "height": 20744475,
+                    "timestamp": "2023-11-27T20:35:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744475-000004-96dab"
+                  },
+                  "call": {
+                    "id": "0020744475-000004-96dab"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744463-000041-02e59",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 41,
+                  "block": {
+                    "id": "0020744463-02e59",
+                    "height": 20744463,
+                    "timestamp": "2023-11-27T20:33:54.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744463-000004-02e59"
+                  },
+                  "call": {
+                    "id": "0020744463-000004-02e59"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744456-000039-448f3",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 39,
+                  "block": {
+                    "id": "0020744456-448f3",
+                    "height": 20744456,
+                    "timestamp": "2023-11-27T20:33:12.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744456-000002-448f3"
+                  },
+                  "call": {
+                    "id": "0020744456-000002-448f3"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744451-000040-09bc1",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 40,
+                  "block": {
+                    "id": "0020744451-09bc1",
+                    "height": 20744451,
+                    "timestamp": "2023-11-27T20:32:42.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744451-000002-09bc1"
+                  },
+                  "call": {
+                    "id": "0020744451-000002-09bc1"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744445-000039-6be1b",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 39,
+                  "block": {
+                    "id": "0020744445-6be1b",
+                    "height": 20744445,
+                    "timestamp": "2023-11-27T20:32:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744445-000002-6be1b"
+                  },
+                  "call": {
+                    "id": "0020744445-000002-6be1b"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744425-000039-e389c",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 39,
+                  "block": {
+                    "id": "0020744425-e389c",
+                    "height": 20744425,
+                    "timestamp": "2023-11-27T20:30:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744425-000002-e389c"
+                  },
+                  "call": {
+                    "id": "0020744425-000002-e389c"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744415-000040-ca461",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 40,
+                  "block": {
+                    "id": "0020744415-ca461",
+                    "height": 20744415,
+                    "timestamp": "2023-11-27T20:29:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744415-000002-ca461"
+                  },
+                  "call": {
+                    "id": "0020744415-000002-ca461"
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://kusama.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tevents(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0020744557-000040-ad5b9",
+            "0020744545-000048-90414",
+            "0020744535-000040-c41cc",
+            "0020744475-000041-96dab",
+            "0020744463-000041-02e59",
+            "0020744456-000039-448f3",
+            "0020744451-000040-09bc1",
+            "0020744445-000039-6be1b",
+            "0020744425-000039-e389c",
+            "0020744415-000040-ca461"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0020744415-000040-ca461",
+              "args": {
+                "amount": "9472504514",
+                "from": "0x26799cd6900a727b7987d751e7623aec74ddf018d0f606a6aa2cfb086747485a",
+                "to": "0xa777a57920a7fc3eef1cb05b4fa6f87ac4329a343c06745b6f58a716ee4dd8c6"
+              }
+            },
+            {
+              "id": "0020744425-000039-e389c",
+              "args": {
+                "amount": "2632882320000",
+                "from": "0x68e8ca19a25c1aee85d10ef31f6426d23b2fc84b9953aa2056029fade59450d6",
+                "to": "0x7a6452ca7e570077e3183676f132958b961413ee0c072e4f666cf8419c5027a2"
+              }
+            },
+            {
+              "id": "0020744445-000039-6be1b",
+              "args": {
+                "amount": "1191158170000",
+                "from": "0x68f1ef3ec9218a3ee52324d35d8227529e29ea39383ca9c2942d357af0c58342",
+                "to": "0x814f8895e322fa04d60d8f67661badc1cbf824c2bf237fb2cbedc700de6eab12"
+              }
+            },
+            {
+              "id": "0020744451-000040-09bc1",
+              "args": {
+                "amount": "2632282320000",
+                "from": "0x7a6452ca7e570077e3183676f132958b961413ee0c072e4f666cf8419c5027a2",
+                "to": "0x7cc5e79d23002be0ec9d6356e519dc9dbf9f4fef63ae9c491f3e5e15ef9435a3"
+              }
+            },
+            {
+              "id": "0020744456-000039-448f3",
+              "args": {
+                "amount": "15000000000000",
+                "from": "0x6c31080f216de564c34d46bf8fae71606a955aacd00a9a9b9f1f932fe6118711",
+                "to": "0xb400a4aa2b6c5656b9e471192d9a5199766b1ebb4eefbf8d161c22ec48981f2a"
+              }
+            },
+            {
+              "id": "0020744463-000041-02e59",
+              "args": {
+                "amount": "103439138250191",
+                "from": "0x90ef637a377048446b168a92065bbb4c4946ec69d4521ca9ff831231b3bdff8c",
+                "to": "0x9df4bc899a1ced74fb5c0bccefd4cb265316b63508b638c545df3bd110adc9f4"
+              }
+            },
+            {
+              "id": "0020744475-000041-96dab",
+              "args": {
+                "amount": "9475837844",
+                "from": "0x1d63cdebbb0552547bb5086658d504292e7597e49734943bc95d573ef5fa97a9",
+                "to": "0xa777a57920a7fc3eef1cb05b4fa6f87ac4329a343c06745b6f58a716ee4dd8c6"
+              }
+            },
+            {
+              "id": "0020744535-000040-c41cc",
+              "args": {
+                "amount": "9475837844",
+                "from": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                "to": "0xa777a57920a7fc3eef1cb05b4fa6f87ac4329a343c06745b6f58a716ee4dd8c6"
+              }
+            },
+            {
+              "id": "0020744545-000048-90414",
+              "args": {
+                "amount": "50000000000",
+                "from": "0xe611260a37d446f021fbb298533892d4355ecdfa4ca3682ddb02d4b221f809ed",
+                "to": "0xf4d59b887a5c91d80b58e45228068d67b55fc6dd26171012532e62fd8a66dbb7"
+              }
+            },
+            {
+              "id": "0020744557-000040-ad5b9",
+              "args": {
+                "amount": "3000000000000",
+                "from": "0x6d6f646c70792f6e6f706c730035000000000000000000000000000000000000",
+                "to": "0xca33ef8393b40ba4cfa049bcb7778656a6ac2175753f3a765fd0f8be1619346d"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-pallet-events-data.json b/test/e2e/fixtures/search-single-by-pallet-events-data.json
new file mode 100644
index 00000000..b9479f61
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-pallet-events-data.json
@@ -0,0 +1,75 @@
+{
+  "itemsCount": "(67,248,957)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "20744545-51",
+      "Balances.Deposit",
+      "20744545-5",
+      "Parsed\nRaw\namount\n\t\n104890734\n\n\nwho\n\t\nDpLatoXXBiSAPooF17bzUZGo7huNB7USfRqd2SgL6RBy2zr"
+    ],
+    [
+      "Kusama",
+      "20744545-49",
+      "Balances.Deposit",
+      "20744545-5",
+      "Parsed\nRaw\namount\n\t\n419562935\n\n\nwho\n\t\nF3opxRbN5ZbjJNU511Kj2TLuzFcDq9BGduA9TgiECafpg29"
+    ],
+    [
+      "Kusama",
+      "20744545-48",
+      "Balances.Transfer",
+      "20744545-5",
+      "Parsed\nRaw\namount\n\t\n50000000000\n\n\nfrom\n\t\nHmydEK9XusySjw4gW6U98YMhehzL6CsCvpiWdPtfn9DjAk1\n\n\nto\n\t\nJ7Lf2DUyJ3br87QYF9TtbbGQt1pRe9K7gCxofwBUyfvC3mf"
+    ],
+    [
+      "Kusama",
+      "20744545-47",
+      "Balances.Endowed",
+      "20744545-5",
+      "Parsed\nRaw\naccount\n\t\nJ7Lf2DUyJ3br87QYF9TtbbGQt1pRe9K7gCxofwBUyfvC3mf\n\n\nfreeBalance\n\t\n50000000000"
+    ],
+    [
+      "Kusama",
+      "20744545-45",
+      "Balances.Withdraw",
+      "20744545-5",
+      "Parsed\nRaw\namount\n\t\n524453669\n\n\nwho\n\t\nHmydEK9XusySjw4gW6U98YMhehzL6CsCvpiWdPtfn9DjAk1"
+    ],
+    [
+      "Kusama",
+      "20744535-43",
+      "Balances.Deposit",
+      "20744535-2",
+      "Parsed\nRaw\namount\n\t\n104890734\n\n\nwho\n\t\nCroiANffLtjz44LXp98NqmLxuUW5xxbsruZiRUXdeGFD82a"
+    ],
+    [
+      "Kusama",
+      "20744535-41",
+      "Balances.Deposit",
+      "20744535-2",
+      "Parsed\nRaw\namount\n\t\n419562935\n\n\nwho\n\t\nF3opxRbN5ZbjJNU511Kj2TLuzFcDq9BGduA9TgiECafpg29"
+    ],
+    [
+      "Kusama",
+      "20744535-40",
+      "Balances.Transfer",
+      "20744535-2",
+      "Parsed\nRaw\namount\n\t\n9475837844\n\n\nfrom\n\t\nFjyPzqCQJP7vXMzHDvkjE6d9ncHtHz3FzcKouCv8SFXtVGd\n\n\nto\n\t\nGMu4FmM9DhHj86G18EVVqd7oueXnqqvF5okREkvMv45xCqK"
+    ],
+    [
+      "Kusama",
+      "20744535-39",
+      "Balances.DustLost",
+      "20744535-2",
+      "Parsed\nRaw\naccount\n\t\nFjyPzqCQJP7vXMzHDvkjE6d9ncHtHz3FzcKouCv8SFXtVGd\n\n\namount\n\t\n135546331"
+    ],
+    [
+      "Kusama",
+      "20744535-37",
+      "Balances.Withdraw",
+      "20744535-2",
+      "Parsed\nRaw\namount\n\t\n524453669\n\n\nwho\n\t\nFjyPzqCQJP7vXMzHDvkjE6d9ncHtHz3FzcKouCv8SFXtVGd"
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-pallet-extrinsics-data.json b/test/e2e/fixtures/search-single-by-pallet-extrinsics-data.json
new file mode 100644
index 00000000..f5c1af6e
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-pallet-extrinsics-data.json
@@ -0,0 +1,75 @@
+{
+  "itemsCount": "(5,942,157)",
+  "itemsTable": [
+    [
+      "Kusama",
+      "20744545-5",
+      "Balances.transfer_allow_death",
+      "HmydEK...9DjAk1",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744535-2",
+      "Balances.transfer",
+      "FjyPzq...FXtVGd",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744475-4",
+      "Balances.transfer",
+      "DErZ7i...9AA4dw",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744463-4",
+      "Balances.transfer_allow_death",
+      "FrMXVD...9j5DMP",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744456-2",
+      "Balances.transfer_keep_alive",
+      "F2BFj9...SKzfsM",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744451-2",
+      "Balances.transfer_allow_death",
+      "FLoAMC...AbBqdp",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744445-2",
+      "Balances.transfer_allow_death",
+      "EwvNG5...WQhx3E",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744425-2",
+      "Balances.transfer_allow_death",
+      "EwsehE...K28RBm",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744415-2",
+      "Balances.transfer",
+      "DSmTrq...9LeZ2b",
+      ""
+    ],
+    [
+      "Kusama",
+      "20744385-2",
+      "Balances.transfer_keep_alive",
+      "FjyPzq...FXtVGd",
+      ""
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/test/e2e/fixtures/search-single-by-pallet-request.json b/test/e2e/fixtures/search-single-by-pallet-request.json
new file mode 100644
index 00000000..a9c4da3e
--- /dev/null
+++ b/test/e2e/fixtures/search-single-by-pallet-request.json
@@ -0,0 +1,622 @@
+[
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t$extrinsicsByNameCounterId: String!,\n\t\t\t$eventsByNameCounterId: String!\n\t\t) {\n\t\t\textrinsicsByNameCounter: itemsCounterById(id: $extrinsicsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t\teventsByNameCounter: itemsCounterById(id: $eventsByNameCounterId) {\n\t\t\t\ttotal\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "extrinsicsByNameCounterId": "Extrinsics.Balances",
+          "eventsByNameCounterId": "Events.Balances"
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsicsByNameCounter": {
+            "total": 5942157
+          },
+          "eventsByNameCounter": {
+            "total": 67248957
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query (\n\t\t\t\t$extrinsicsFirst: Int!,\n\t\t\t\t$extrinsicsAfter: String,\n\t\t\t\t$extrinsicsFilter: ExtrinsicWhereInput,\n\t\t\t\t$eventsFirst: Int!,\n\t\t\t\t$eventsAfter: String,\n\t\t\t\t$eventsFilter: EventWhereInput,\n\t\t\t) {\n\t\t\t\textrinsics: extrinsicsConnection(first: $extrinsicsFirst, after: $extrinsicsAfter, where: $extrinsicsFilter, orderBy: id_DESC) {\n\t\t\t\t\t...ExplorerSquidExtrinsicsConnection\n\t\t\t\t}\n\t\t\t\tevents: eventsConnection(first: $eventsFirst, after: $eventsAfter, where: $eventsFilter, orderBy: id_DESC) {\n\t\t\t\t\t...ExplorerSquidEventsConnection\n\t\t\t\t}\n\t\t\t}\n\n\t\tfragment ExplorerSquidExtrinsicsConnection on ExtrinsicsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidExtrinsic\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEventsConnection on EventsConnection {\n\t\t\t\n\t\tedges {\n\t\t\tnode {\n\t\t\t\t...ExplorerSquidEvent\n\t\t\t}\n\t\t}\n\t\tpageInfo {\n\t\t\tendCursor\n\t\t\thasNextPage\n\t\t\thasPreviousPage\n\t\t\tstartCursor\n\t\t}\n\t\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidEvent on Event {\n\t\t\t\n\tid\n\teventName\n\tpalletName\n\tindexInBlock\n\tblock {\n\t\tid\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\textrinsic {\n\t\tid\n\t}\n\tcall {\n\t\tid\n\t}\n\n\t\t}\n\t\n\n\t\tfragment ExplorerSquidExtrinsic on Extrinsic {\n\t\t\t\n\tid\n\textrinsicHash\n\tblock {\n\t\tid\n\t\thash\n\t\theight\n\t\ttimestamp\n\t\tspecVersion\n\t}\n\tmainCall {\n\t\tcallName\n\t\tpalletName\n\t}\n\tindexInBlock\n\tsuccess\n\ttip\n\tfee\n\tsignerPublicKey\n\terror\n\tversion\n\n\t\t}\n\t",
+        "variables": {
+          "extrinsicsFirst": 10,
+          "extrinsicsAfter": null,
+          "extrinsicsFilter": {
+            "mainCall": {
+              "palletName_eq": "Balances"
+            }
+          },
+          "eventsFirst": 10,
+          "eventsAfter": null,
+          "eventsFilter": {
+            "palletName_eq": "Balances"
+          }
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "extrinsics": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0020744545-000005-90414",
+                  "extrinsicHash": "0x5529e2f56ad63064d7f1c21eb5407c53ee46641716d17c6f28fca279780dd019",
+                  "block": {
+                    "id": "0020744545-90414",
+                    "hash": "0x9041490520c6589953d81eaa21570702653c90c322f9b8e737d1d25cf79803ea",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_allow_death",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 5,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0xe611260a37d446f021fbb298533892d4355ecdfa4ca3682ddb02d4b221f809ed",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000002-c41cc",
+                  "extrinsicHash": "0xfb3279947a05a87bf60cc75b31d0d9e2b2ad8ac31a8d0c86ed272cee295a2848",
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "hash": "0xc41cc511028cebbcbf81af350953a1c604fe98cfb376f164645356b93ccb3bfc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744475-000004-96dab",
+                  "extrinsicHash": "0xf73064de4bf1b6b71e9629cbf763ed90131fa2223e71a704bbe62a6cce8ef764",
+                  "block": {
+                    "id": "0020744475-96dab",
+                    "hash": "0x96dab4c7e41357981f7e454c21acbe2fa0939706fb17a90b106621a71888fc6a",
+                    "height": 20744475,
+                    "timestamp": "2023-11-27T20:35:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x1d63cdebbb0552547bb5086658d504292e7597e49734943bc95d573ef5fa97a9",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744463-000004-02e59",
+                  "extrinsicHash": "0x2710b5d352811045d4f34cea28a4c3f65bd491cc5355e8ac55a7911a21a2b468",
+                  "block": {
+                    "id": "0020744463-02e59",
+                    "hash": "0x02e594ae7397721f5373b33e5a1b28b61f7484557c0cadb26c4aa2af48ffde87",
+                    "height": 20744463,
+                    "timestamp": "2023-11-27T20:33:54.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_allow_death",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 4,
+                  "success": true,
+                  "tip": "1000000000",
+                  "fee": "541120319",
+                  "signerPublicKey": "0x90ef637a377048446b168a92065bbb4c4946ec69d4521ca9ff831231b3bdff8c",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744456-000002-448f3",
+                  "extrinsicHash": "0x831f43973f6d1dd5f621adee03f72b3c1b3301bf0c392e21564f29e0c3d925fb",
+                  "block": {
+                    "id": "0020744456-448f3",
+                    "hash": "0x448f34da9fe705026af3467e68ffaefae941a1cdc34baa27abc0a858eb752746",
+                    "height": 20744456,
+                    "timestamp": "2023-11-27T20:33:12.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "530828816",
+                  "signerPublicKey": "0x6c31080f216de564c34d46bf8fae71606a955aacd00a9a9b9f1f932fe6118711",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744451-000002-09bc1",
+                  "extrinsicHash": "0x4d1de9602c7c9b2a359a6edaf0e15b1e937ad4483f245dc42fb0614d8e78fbfd",
+                  "block": {
+                    "id": "0020744451-09bc1",
+                    "hash": "0x09bc1c738f4690779b341371e3c4e51095c4bc1b2c06ae5595f221dddb371844",
+                    "height": 20744451,
+                    "timestamp": "2023-11-27T20:32:42.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_allow_death",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "527786999",
+                  "signerPublicKey": "0x7a6452ca7e570077e3183676f132958b961413ee0c072e4f666cf8419c5027a2",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744445-000002-6be1b",
+                  "extrinsicHash": "0x2d0f14967421af9a250cd42e6f52bf4d88692f5ea5f6c264b444904d5a8938d2",
+                  "block": {
+                    "id": "0020744445-6be1b",
+                    "hash": "0x6be1bfd5bd8b4cc6ea97c4ce727050e71affa903bda819f4c4243c39df3cf669",
+                    "height": 20744445,
+                    "timestamp": "2023-11-27T20:32:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_allow_death",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "531120329",
+                  "signerPublicKey": "0x68f1ef3ec9218a3ee52324d35d8227529e29ea39383ca9c2942d357af0c58342",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744425-000002-e389c",
+                  "extrinsicHash": "0xa714b7040a40219b8177fad4cc6f154f43ff85589f5a5730a3431aed35e6f3f6",
+                  "block": {
+                    "id": "0020744425-e389c",
+                    "hash": "0xe389c88cb7abe5712b6238e43021b995dc41bee913e1e207b2988179a5a68dc8",
+                    "height": 20744425,
+                    "timestamp": "2023-11-27T20:30:06.001000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_allow_death",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "537786989",
+                  "signerPublicKey": "0x68e8ca19a25c1aee85d10ef31f6426d23b2fc84b9953aa2056029fade59450d6",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744415-000002-ca461",
+                  "extrinsicHash": "0xd9cf36ede38866b900529b5fd7262745c2aaa523c95f2d8894008d61f7ec6855",
+                  "block": {
+                    "id": "0020744415-ca461",
+                    "hash": "0xca461a94e6dd21a9b27e06efb28103a93220d66290ea640bfaaf9d2a7811c626",
+                    "height": 20744415,
+                    "timestamp": "2023-11-27T20:29:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524453669",
+                  "signerPublicKey": "0x26799cd6900a727b7987d751e7623aec74ddf018d0f606a6aa2cfb086747485a",
+                  "error": null,
+                  "version": 4
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744385-000002-006cc",
+                  "extrinsicHash": "0x166e4428dc5e17c22d873b130fe54803505fd3797934cfe740de8e2dca3c408e",
+                  "block": {
+                    "id": "0020744385-006cc",
+                    "hash": "0x006ccaff8e57abd26b1aeb02d7b52c5df5b28a36b844f4e6b7b6c988bd006527",
+                    "height": 20744385,
+                    "timestamp": "2023-11-27T20:26:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "mainCall": {
+                    "callName": "transfer_keep_alive",
+                    "palletName": "Balances"
+                  },
+                  "indexInBlock": 2,
+                  "success": true,
+                  "tip": "0",
+                  "fee": "524162156",
+                  "signerPublicKey": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                  "error": null,
+                  "version": 4
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          },
+          "events": {
+            "edges": [
+              {
+                "node": {
+                  "id": "0020744545-000051-90414",
+                  "eventName": "Deposit",
+                  "palletName": "Balances",
+                  "indexInBlock": 51,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744545-000049-90414",
+                  "eventName": "Deposit",
+                  "palletName": "Balances",
+                  "indexInBlock": 49,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744545-000048-90414",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 48,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744545-000047-90414",
+                  "eventName": "Endowed",
+                  "palletName": "Balances",
+                  "indexInBlock": 47,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744545-000045-90414",
+                  "eventName": "Withdraw",
+                  "palletName": "Balances",
+                  "indexInBlock": 45,
+                  "block": {
+                    "id": "0020744545-90414",
+                    "height": 20744545,
+                    "timestamp": "2023-11-27T20:42:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744545-000005-90414"
+                  },
+                  "call": {
+                    "id": "0020744545-000005-90414"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000043-c41cc",
+                  "eventName": "Deposit",
+                  "palletName": "Balances",
+                  "indexInBlock": 43,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000041-c41cc",
+                  "eventName": "Deposit",
+                  "palletName": "Balances",
+                  "indexInBlock": 41,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000040-c41cc",
+                  "eventName": "Transfer",
+                  "palletName": "Balances",
+                  "indexInBlock": 40,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000039-c41cc",
+                  "eventName": "DustLost",
+                  "palletName": "Balances",
+                  "indexInBlock": 39,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              },
+              {
+                "node": {
+                  "id": "0020744535-000037-c41cc",
+                  "eventName": "Withdraw",
+                  "palletName": "Balances",
+                  "indexInBlock": 37,
+                  "block": {
+                    "id": "0020744535-c41cc",
+                    "height": 20744535,
+                    "timestamp": "2023-11-27T20:41:06.000000Z",
+                    "specVersion": 1000000
+                  },
+                  "extrinsic": {
+                    "id": "0020744535-000002-c41cc"
+                  },
+                  "call": {
+                    "id": "0020744535-000002-c41cc"
+                  }
+                }
+              }
+            ],
+            "pageInfo": {
+              "endCursor": "10",
+              "hasNextPage": true,
+              "hasPreviousPage": false,
+              "startCursor": "1"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "request": {
+      "url": "https://kusama.explorer.subsquid.io/graphql",
+      "method": "POST",
+      "postData": {
+        "query": "query($ids: [String!]) {\n\t\t\tevents(where: { id_in: $ids }) {\n\t\t\t\tid\n\t\t\t\targs\n\t\t\t}\n\t\t}\n",
+        "variables": {
+          "ids": [
+            "0020744545-000051-90414",
+            "0020744545-000049-90414",
+            "0020744545-000048-90414",
+            "0020744545-000047-90414",
+            "0020744545-000045-90414",
+            "0020744535-000043-c41cc",
+            "0020744535-000041-c41cc",
+            "0020744535-000040-c41cc",
+            "0020744535-000039-c41cc",
+            "0020744535-000037-c41cc"
+          ]
+        }
+      }
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "data": {
+          "events": [
+            {
+              "id": "0020744535-000037-c41cc",
+              "args": {
+                "amount": "524453669",
+                "who": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37"
+              }
+            },
+            {
+              "id": "0020744535-000039-c41cc",
+              "args": {
+                "account": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                "amount": "135546331"
+              }
+            },
+            {
+              "id": "0020744535-000040-c41cc",
+              "args": {
+                "amount": "9475837844",
+                "from": "0x8c116c4158254ca725fe174087062723a7ab23e7c6a800087f2499949e901b37",
+                "to": "0xa777a57920a7fc3eef1cb05b4fa6f87ac4329a343c06745b6f58a716ee4dd8c6"
+              }
+            },
+            {
+              "id": "0020744535-000041-c41cc",
+              "args": {
+                "amount": "419562935",
+                "who": "0x6d6f646c70792f74727372790000000000000000000000000000000000000000"
+              }
+            },
+            {
+              "id": "0020744535-000043-c41cc",
+              "args": {
+                "amount": "104890734",
+                "who": "0x0c92d4e41eddd3bec4ce4caf3610213e3b3b143a6c0319766961aecc27e124ff"
+              }
+            },
+            {
+              "id": "0020744545-000045-90414",
+              "args": {
+                "amount": "524453669",
+                "who": "0xe611260a37d446f021fbb298533892d4355ecdfa4ca3682ddb02d4b221f809ed"
+              }
+            },
+            {
+              "id": "0020744545-000047-90414",
+              "args": {
+                "account": "0xf4d59b887a5c91d80b58e45228068d67b55fc6dd26171012532e62fd8a66dbb7",
+                "freeBalance": "50000000000"
+              }
+            },
+            {
+              "id": "0020744545-000048-90414",
+              "args": {
+                "amount": "50000000000",
+                "from": "0xe611260a37d446f021fbb298533892d4355ecdfa4ca3682ddb02d4b221f809ed",
+                "to": "0xf4d59b887a5c91d80b58e45228068d67b55fc6dd26171012532e62fd8a66dbb7"
+              }
+            },
+            {
+              "id": "0020744545-000049-90414",
+              "args": {
+                "amount": "419562935",
+                "who": "0x6d6f646c70792f74727372790000000000000000000000000000000000000000"
+              }
+            },
+            {
+              "id": "0020744545-000051-90414",
+              "args": {
+                "amount": "104890734",
+                "who": "0x36ed432555d82a6fe15f2517dc871f1d02c72d8d5aa1bce703288d180ff1fdf6"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/fixtures/usd-rates-request.json b/test/e2e/fixtures/usd-rates-request.json
new file mode 100644
index 00000000..6055b08b
--- /dev/null
+++ b/test/e2e/fixtures/usd-rates-request.json
@@ -0,0 +1,74 @@
+[
+  {
+    "request": {
+      "url": "https://api.coingecko.com/api/v3/simple/price?ids=acala%2Castar%2Cajuna-network%2Cbifrost-native-coin%2Ccalamari-network%2Chydradx%2Cinterlay%2Cjoystream%2Ckarura%2Cpha%2Ckintsugi%2Ckusama%2Clitentry%2Clitentry%2Cmoonbeam%2Cmoonriver%2Cpendulum-chain%2Cpha%2Cpolkadot%2Crobonomics-network%2Cshiden%2Ckusama%2Cpolkadot%2Cxxcoin&vs_currencies=usd&precision=full",
+      "method": "GET",
+      "postData": null
+    },
+    "response": {
+      "status": 200,
+      "body": {
+        "acala": {
+          "usd": 0.05728641387421618
+        },
+        "ajuna-network": {
+          "usd": 0.03219365389786684
+        },
+        "astar": {
+          "usd": 0.06879217795063797
+        },
+        "bifrost-native-coin": {
+          "usd": 0.2676842552502532
+        },
+        "calamari-network": {
+          "usd": 0.0009224545096462993
+        },
+        "hydradx": {
+          "usd": 0.006664216728911165
+        },
+        "interlay": {
+          "usd": 0.023968898685410446
+        },
+        "joystream": {
+          "usd": 0.04796824631116394
+        },
+        "karura": {
+          "usd": 0.09162634364291665
+        },
+        "kintsugi": {
+          "usd": 0.40122103617817767
+        },
+        "kusama": {
+          "usd": 24.59247994657044
+        },
+        "litentry": {
+          "usd": 0.9108768083256917
+        },
+        "moonbeam": {
+          "usd": 0.25397245327056617
+        },
+        "moonriver": {
+          "usd": 6.898038328587493
+        },
+        "pendulum-chain": {
+          "usd": 0.06764418791974738
+        },
+        "pha": {
+          "usd": 0.10710814682838463
+        },
+        "polkadot": {
+          "usd": 5.204577942575769
+        },
+        "robonomics-network": {
+          "usd": 2.31419256288412
+        },
+        "shiden": {
+          "usd": 0.2342131360928469
+        },
+        "xxcoin": {
+          "usd": 0.07185840073783409
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/test/e2e/home.spec.ts b/test/e2e/home.spec.ts
index 31a5b46e..3d6c2e24 100644
--- a/test/e2e/home.spec.ts
+++ b/test/e2e/home.spec.ts
@@ -1,26 +1,10 @@
 import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+import { test, expect } from "../test";
 
 test.describe("home page", () => {
 	test("shows home page", async ({ page, takeScreenshot }) => {
 		await navigate(page, "/", {waitUntil: "load"});
 
-		const networkSelect = page.locator(".MuiSelect-select");
-		await networkSelect.click();
-		await page.locator(".MuiMenuItem-root", {hasText: /^Polkadot$/}).click();
-
 		await takeScreenshot("home");
 	});
-
-	test("keeps last selected network after reload", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/", {waitUntil: "load"});
-
-		const networkSelect = page.locator(".MuiSelect-select");
-		await networkSelect.click();
-
-		await page.locator(".MuiMenuItem-root", {hasText: /^Polkadot$/}).click();
-		await page.reload();
-
-		await expect(networkSelect).toHaveText("Polkadot");
-	});
 });
diff --git a/test/e2e/network.fixture.json b/test/e2e/network.fixture.json
deleted file mode 100644
index d93811c7..00000000
--- a/test/e2e/network.fixture.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-	"stats": {
-		"data": {
-			"currents": [
-				{
-					"chainFinalizedBlocks": "17041967",
-					"nominationPoolsMembersAmount": 14111,
-					"nominationPoolsPoolsActiveTotalStake": "66052692450108600",
-					"chainSignedExtrinsics": "13401862",
-					"stakingTotalStake": "6578430208558741725",
-					"balancesTotalIssuance": "13496997352396268589",
-					"balancesTransfersAmount": "11156384",
-					"stakingActiveValidatorsAmount": 297,
-					"stakingValidatorsIdealAmount": 297,
-					"stakingInflationRatio": 7.373995331554838,
-					"stakingRewardsRatio": 15.129262196487339,
-					"nominationPoolsPoolsActiveAmount": 137
-				}
-			]
-		}
-	}
-}
diff --git a/test/e2e/network.spec.ts b/test/e2e/network.spec.ts
index 02888e83..9f3a4759 100644
--- a/test/e2e/network.spec.ts
+++ b/test/e2e/network.spec.ts
@@ -1,193 +1,127 @@
-import { mockRequest } from "../utils/mockRequest";
+import { Locator } from "@playwright/test";
+
+import { waitForPageEvent } from "../utils/events";
 import { navigate } from "../utils/navigate";
-import { removeContent } from "../utils/removeContent";
-import { test, expect } from "../utils/test";
+import { useDataFixture } from "../utils/useDataFixture";
+import { useRequestFixture } from "../utils/useRequestFixture";
+
+import { expect, test } from "../test";
 
-import fixtures from "./network.fixture.json";
+import { TestItem } from "./templates/model";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { mockRequestsWithFixture } from "./templates/utils";
 
 test.describe("Network page", () => {
+	const url = "/polkadot";
+
+	const network: TestItem = {
+		name: "network",
+		requests: [{
+			queryProp: "currents",
+			squidType: "gs-stats",
+			dataType: "item"
+		}]
+	};
+
+	const relatedExtrinsics: TestItem = {
+		name: "extrinsic",
+		requests: [{
+			queryProp: "extrinsicsConnection",
+			squidType: "gs-explorer",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedBlocks: TestItem = {
+		name: "block",
+		requests: [{
+			queryProp: "blocksConnection",
+			squidType: "gs-explorer",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedTransfers: TestItem = {
+		name: "transfer",
+		requests: [{
+			queryProp: "transfersConnection",
+			squidType: "gs-main",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	const relatedHolders: TestItem = {
+		name: "holder",
+		requests: [{
+			queryProp: "accountsConnection",
+			squidType: "gs-stats",
+			dataType: "itemsConnection"
+		}]
+	};
+
+	mockRequestsWithFixture(network, [
+		relatedExtrinsics,
+		relatedBlocks,
+		relatedTransfers,
+		relatedHolders
+	]);
 
 	test.beforeEach(async ({ page }) => {
-		await page.route("**/*", (route, request) => {
-
-			if (request.url().match("gs-stats-polkadot") && request.postDataJSON()?.query.match("currents")) {
-				return route.fulfill({
-					status: 200,
-					body: JSON.stringify(fixtures.stats)
-				});
-			}
-
-			route.continue();
+		await page.route("https://api.coingecko.com/api/v3/simple/price?*", async (route, request) => {
+			route.fulfill(await useRequestFixture("usd-rates-request", route));
 		});
 	});
 
-	test("redirects to /:network", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot/latest-extrinsics", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/polkadot/);
-	});
-
-	test("shows stats", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		const stats = page.getByTestId("network-stats");
-		await takeScreenshot("network-stats", stats);
-	});
-
-	test("shows token distribution", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		const tokenDistribution = page.getByTestId("network-token-distribution");
-		await takeScreenshot("network-stats", tokenDistribution);
-	});
-
-	test("shows latest extrinsics tab", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		await removeContent(page.locator("[data-test=extrinsics-table] tr td"));
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-extrinsics", relatedItems);
-	});
-
-	test("shows latest blocks tab", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("blocks-tab").click();
-
-		await removeContent(page.locator("[data-test=blocks-table] tr td"));
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-blocks", relatedItems);
-	});
-
-	test("shows latest transfers tab", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("transfers-tab").click();
-
-		await removeContent(page.locator("[data-test=transfers-table] tr td"));
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-transfers", relatedItems);
-	});
-
-	test("shows top holders tab", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("top-holders-tab").click();
-
-		await removeContent(page.locator("[data-test=balances-table] tr td"));
+	test("show network stats", async ({ page, takeScreenshot }) => {
+		await navigate(page, "/polkadot");
 
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-top-holders", relatedItems);
-	});
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $stats = $info.getByTestId("network-stats");
 
-	test("show error message when extrinsics items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsics"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsics error"
-					}]
-				})
-			})
+		await expect($header).toHaveText(
+			await useDataFixture("network-info-data", "header", $header)
 		);
 
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Extrinsics error/);
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-extrinsics-error", relatedItems);
+		const getNetworkStatsData = async (locator: Locator) => await locator.locator("> div").allInnerTexts();
+
+		await expect(async () => {
+			const networkStatsData = await getNetworkStatsData($stats);
+			expect(networkStatsData).toEqual(
+				await useDataFixture(
+					"network-info-data",
+					"stats",
+					$stats,
+					getNetworkStatsData
+				)
+			);
+		}).toPass({timeout: 5000});
+
+		await takeScreenshot("network-info", $info);
 	});
 
-	test("show error message when blocks items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("blocks"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Blocks error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("blocks-tab").click();
+	test("shows network token distribution", async ({ page, takeScreenshot }) => {
+		await navigate(page, url);
 
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Blocks error/);
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-blocks-error", relatedItems);
-	});
+		const tokenDistribution = page.getByTestId("network-token-distribution");
 
-	test("show error message when transfers items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("transfers"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Transfers error"
-					}]
-				})
-			})
+		const $totalIssuance = tokenDistribution.getByTestId("network-total-issuance").locator("div").last();
+		await expect($totalIssuance).toBeVisible();
+		await expect($totalIssuance).toContainText(
+			await useDataFixture("network-info-data", "totalIssuance", $totalIssuance)
 		);
 
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("transfers-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Transfers error/);
+		await expect(tokenDistribution.getByTestId("network-token-distribution-chart")).toBeVisible();
+		await waitForPageEvent(page, "chart-finished", (event: any) => {
+			return event.detail.containerRef?.getAttribute("data-test") === "network-token-distribution-chart";
+		});
 
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-latest-transfers-error", relatedItems);
+		await takeScreenshot("network-token-distribution", tokenDistribution);
 	});
 
-	test("show error message when top holders items fetch fails", async ({ page, takeScreenshot }) => {
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("accounts"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Top holders error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, "/polkadot", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("top-holders-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Top holders error/);
-
-		const relatedItems = page.getByTestId("network-related-items");
-		await takeScreenshot("network-top-holders-error", relatedItems);
-	});
+	testRelatedItems(url, network, relatedExtrinsics, { testCount: false });
+	testRelatedItems(url, network, relatedBlocks, { testCount: false });
+	testRelatedItems(url, network, relatedTransfers, { testCount: false });
+	testRelatedItems(url, network, relatedHolders, { testCount: false });
 });
 
diff --git a/test/e2e/notFound.spec.ts b/test/e2e/notFound.spec.ts
index 17c971ae..220aa095 100644
--- a/test/e2e/notFound.spec.ts
+++ b/test/e2e/notFound.spec.ts
@@ -1,5 +1,6 @@
 import { navigate } from "../utils/navigate";
-import { test, expect } from "../utils/test";
+
+import { test, expect } from "../test";
 
 test.describe("Not found page", () => {
 	test("shows not found page", async ({ page, takeScreenshot }) => {
diff --git a/test/e2e/search.spec.ts b/test/e2e/search.spec.ts
new file mode 100644
index 00000000..cb574b66
--- /dev/null
+++ b/test/e2e/search.spec.ts
@@ -0,0 +1,776 @@
+import { matchSquidRequest } from "../utils/matchSquidRequest";
+import { navigate } from "../utils/navigate";
+import { useDataFixture } from "../utils/useDataFixture";
+import { useRequestFixture } from "../utils/useRequestFixture";
+
+import { expect, test } from "../test";
+
+import { TestItem } from "./templates/model";
+import { testRelatedItems } from "./templates/testRelatedItems";
+import { testRelatedItemsError } from "./templates/testRelatedItemsError";
+import { testRedirect } from "./templates/testRedirect";
+import { getNotFoundData } from "./templates/utils";
+
+test.describe("Search", () => {
+	test.describe("multiple networks", () => {
+		test.describe("by block height", () => {
+			const height = 123;
+			const url = `/search?query=${height}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-block-height",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: "blocks",
+					variables: {
+						blocksFilter: {
+							height_eq: height
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const blockResults: TestItem = {
+				name: "block",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, blockResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRelatedItemsError(url, search, blockResults, search.requests, {
+				wrapperTestId: "search-results",
+				clickTab: false
+			});
+
+			test("redirects to block's detail if only one found", async ({ page, takeScreenshot }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), { ...request, network: "kusama" })) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						} else if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(getNotFoundData(request));
+						}
+					}
+
+					route.fallback();
+				});
+
+				await navigate(page, url);
+				await page.waitForURL(new RegExp(`\\/kusama\\/block\\/${height}`));
+			});
+
+			test("shows not found message if no block was found", async ({ page, takeScreenshot }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(getNotFoundData(request));
+						}
+					}
+
+					route.fallback();
+				});
+
+				await navigate(page, url);
+
+				const $searchResults = page.getByTestId("search-results");
+				const $notFound = $searchResults.getByTestId("not-found");
+
+				await expect($notFound).toHaveText(
+					await useDataFixture(`${search.name}-data`, "notFound", $notFound)
+				);
+
+				await takeScreenshot(`${search.name}-not-found`, $searchResults);
+			});
+		});
+
+		test.describe("by block hash", () => {
+			const hash = "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211";
+			const url = `/search?query=${hash}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-block-hash",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: hash
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: hash
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRedirect("redirects to block's detail if only one block found", url, "/kusama/block/123");
+		});
+
+		test.describe("by extrinsic hash", () => {
+			const hash = "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d";
+			const url = `/search?query=${hash}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-extrinsic-hash",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: hash
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: hash
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			test("redirects to extrinsic's detail", async ({ page }) => {
+				const hash = "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701";
+				const url = `/search?query=${hash}&network=polkadot&network=kusama&network=acala`;
+
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), {
+							...request,
+							variables: {
+								blocksFilter: {
+									hash_eq: hash
+								},
+								extrinsicsFilter: {
+									extrinsicHash_eq: hash
+								}
+							}
+						})) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+
+				await navigate(page, url);
+				await page.waitForURL(/\/kusama\/extrinsic\/123-0/);
+			});
+		});
+
+		test.describe("by account public key", () => {
+			const publicKey = "0x4aca27604ad033f7c45b1cfc23b55520826db4abb69a8a7c165461c40f330c6b";
+			const url = `/search?query=${publicKey}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-account-public-key",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: publicKey
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: publicKey
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const accountResults: TestItem = {
+				name: "account",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(getNotFoundData(request));
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, accountResults, {
+				wrapperTestId: "search-results"
+			});
+		});
+
+		test.describe("by account encoded address", () => {
+			const address = "EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg";
+			const url = `/search?query=${address}&network=polkadot&network=kusama&network=statemine`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-account-encoded-address",
+				requests: []
+			};
+
+			const accountResults: TestItem = {
+				name: "account",
+				requests: []
+			};
+
+			testRelatedItems(url, search, accountResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRedirect(
+				"redirects to account's detail if found",
+				`/search?query=${address}&network=polkadot&network=kusama&network=acala`,
+				`/kusama/account/${address}`
+			);
+		});
+
+		test.describe("by extrinsic or event pallet", () => {
+			const query = "balances";
+			const url = `/search?query=${query}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-pallet",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsicsByNameCounter",
+						"eventsByNameCounter"
+					],
+					variables: {
+						extrinsicsByNameCounterId: "Extrinsics.Balances",
+						eventsByNameCounterId: "Events.Balances"
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			const eventResults: TestItem = {
+				name: "event",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRelatedItems(url, search, eventResults, {
+				wrapperTestId: "search-results"
+			});
+		});
+
+		test.describe("by extrinsic or event name", () => {
+			const query = "balances.transfer";
+			const url = `/search?query=${query}&network=polkadot&network=kusama&network=acala`;
+
+			const search: TestItem = {
+				name: "search-multiple-by-name",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsicsByNameCounter",
+						"eventsByNameCounter"
+					],
+					variables: {
+						extrinsicsByNameCounterId: "Extrinsics.Balances.transfer",
+						eventsByNameCounterId: "Events.Balances.Transfer"
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			const eventResults: TestItem = {
+				name: "event",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRelatedItems(url, search, eventResults, {
+				wrapperTestId: "search-results"
+			});
+		});
+	});
+
+	test.describe("single network", () => {
+		test.describe("by block height", () => {
+			const height = 123;
+			const url = `/search?query=${height}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-block-height",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: "blocks",
+					variables: {
+						blocksFilter: {
+							height_eq: height
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRedirect("redirects to block's detail if found", url, `/kusama/block/${height}`);
+
+			test("shows not found message if no block was found", async ({ page, takeScreenshot }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(getNotFoundData(request));
+						}
+					}
+
+					route.fallback();
+				});
+
+				await navigate(page, url);
+
+				const $searchResults = page.getByTestId("search-results");
+				const $notFound = $searchResults.getByTestId("not-found");
+
+				await expect($notFound).toHaveText(
+					await useDataFixture(`${search.name}-data`, "notFound", $notFound)
+				);
+
+				await takeScreenshot(`${search.name}-not-found`, $searchResults);
+			});
+		});
+
+		test.describe("by block hash", () => {
+			const hash = "0xaff52c40552c33ecd7248506a42d20e2cd44e64bbb299cf6cb979339e90c4211";
+			const url = `/search?query=${hash}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-block-hash",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: hash
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: hash
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRedirect("redirects to block's detail", url, "/kusama/block/123");
+		});
+
+		test.describe("by extrinsic hash", () => {
+			const hash = "0xcf52705d1ade64fc0b05859ac28358c0770a217dd76b75e586ae848c56ae810d";
+			const url = `/search?query=${hash}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-extrinsic-hash",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: hash
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: hash
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			test("redirects to extrinsic's detail", async ({ page }) => {
+				const hash = "0x1775fe247d147290360784ea7a9220345366caee16b4879d97877ba153b0a701";
+				const url = `/search?query=${hash}&network=kusama`;
+
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), {
+							...request,
+							variables: {
+								blocksFilter: {
+									hash_eq: hash
+								},
+								extrinsicsFilter: {
+									extrinsicHash_eq: hash
+								}
+							}
+						})) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+
+				await navigate(page, url);
+				await page.waitForURL(/\/kusama\/extrinsic\/123-0/);
+			});
+		});
+
+		test.describe("by account public key", () => {
+			const publicKey = "0x4aca27604ad033f7c45b1cfc23b55520826db4abb69a8a7c165461c40f330c6b";
+			const url = `/search?query=${publicKey}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-account-public-key",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"blocks",
+						"extrinsics"
+					],
+					variables: {
+						blocksFilter: {
+							hash_eq: publicKey
+						},
+						extrinsicsFilter: {
+							extrinsicHash_eq: publicKey
+						}
+					},
+					dataType: "itemsConnection"
+				}]
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(getNotFoundData(request));
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRedirect("redirects to account's detail", url, "/kusama/account/EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg");
+		});
+
+		test.describe("by account encoded address", () => {
+			const address = "EGP7XztdTosm1EmaATZVMjSWujGEj9nNidhjqA2zZtttkFg";
+			const url = `/search?query=${address}&network=kusama`;
+
+			testRedirect("redirects to account's detail", url, `/kusama/account/${address}`);
+		});
+
+		test.describe("by extrinsic or event pallet", () => {
+			const query = "balances";
+			const url = `/search?query=${query}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-pallet",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsicsByNameCounter",
+						"eventsByNameCounter"
+					],
+					variables: {
+						extrinsicsByNameCounterId: "Extrinsics.Balances",
+						eventsByNameCounterId: "Events.Balances"
+					},
+					dataType: "item"
+				}, {
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsics",
+						"events"
+					],
+					variables: {
+						extrinsicsFilter: {
+							mainCall: {
+								palletName_eq: "Balances",
+							}
+						},
+						eventsFilter: {
+							palletName_eq: "Balances"
+						}
+					},
+					dataType: "itemsConnection"
+				}, {
+					squidType: "archive",
+					queryProp: "events",
+					dataType: "items"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			const eventResults: TestItem = {
+				name: "event",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRelatedItems(url, search, eventResults, {
+				wrapperTestId: "search-results"
+			});
+		});
+
+		test.describe("by extrinsic or event name", () => {
+			const query = "balances.transfer";
+			const url = `/search?query=${query}&network=kusama`;
+
+			const search: TestItem = {
+				name: "search-single-by-name",
+				requests: [{
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsicsByNameCounter",
+						"eventsByNameCounter"
+					],
+					variables: {
+						extrinsicsByNameCounterId: "Extrinsics.Balances.transfer",
+						eventsByNameCounterId: "Events.Balances.Transfer"
+					},
+					dataType: "item"
+				}, {
+					squidType: "gs-explorer",
+					queryProp: [
+						"extrinsics",
+						"events"
+					],
+					variables: {
+						extrinsicsFilter: {
+							mainCall: {
+								palletName_eq: "Balances",
+								callName_eq: "transfer"
+							}
+						},
+						eventsFilter: {
+							palletName_eq: "Balances",
+							eventName_eq: "Transfer"
+						}
+					},
+					dataType: "itemsConnection"
+				}, {
+					squidType: "archive",
+					queryProp: "events",
+					dataType: "items"
+				}]
+			};
+
+			const extrinsicResults: TestItem = {
+				name: "extrinsic",
+				requests: []
+			};
+
+			const eventResults: TestItem = {
+				name: "event",
+				requests: []
+			};
+
+			test.beforeEach(async ({ page }) => {
+				await page.route("**/*", async (route) => {
+					for (const request of search.requests) {
+						if (matchSquidRequest(route.request(), request)) {
+							return route.fulfill(
+								await useRequestFixture(`${search.name}-request`, route)
+							);
+						}
+					}
+
+					route.fallback();
+				});
+			});
+
+			testRelatedItems(url, search, extrinsicResults, {
+				wrapperTestId: "search-results"
+			});
+
+			testRelatedItems(url, search, eventResults, {
+				wrapperTestId: "search-results"
+			});
+		});
+	});
+});
diff --git a/test/e2e/searchResults.spec.ts b/test/e2e/searchResults.spec.ts
deleted file mode 100644
index a605eb5b..00000000
--- a/test/e2e/searchResults.spec.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import { mockRequest } from "../utils/mockRequest";
-
-import { navigate } from "../utils/navigate";
-import { removeContent } from "../utils/removeContent";
-import { test, expect } from "../utils/test";
-
-test.describe("Search results page", () => {
-	test("redirects to extrinsic if found by hash", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=0xf80034290dc9e3c251b883082598f4395ee7c751ca7cc8a4691256e567a437b6", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/kusama\/extrinsic\/0001116746-000000-9f802/);
-	});
-
-	test("redirects to block if found by hash", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=0x9f8022bee8d4b97084eb0f5cd5e2c33834f11506f24443f17802c7df789a1fe0", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/kusama\/block\/0001116746-9f802/);
-	});
-
-	test("redirects to block if found by height", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=1116746", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/kusama\/block\/0001116746-9f802/);
-	});
-
-	test("redirects to account if found by public key", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=0x701edf7baf18532d871b65666416404861faab1d1fcca9241efba6d8cf5f4509", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/kusama\/account\/F7L3yPqrmHtDQd1Ry4w6pXL7Fxpoa1G6VWLSNGa9RwQKNWJ/);
-	});
-
-	test("redirects to account if found by encoded address", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=F7L3yPqrmHtDQd1Ry4w6pXL7Fxpoa1G6VWLSNGa9RwQKNWJ", {waitUntil: "data-loaded"});
-		await page.waitForURL(/\/kusama\/account\/F7L3yPqrmHtDQd1Ry4w6pXL7Fxpoa1G6VWLSNGa9RwQKNWJ/);
-	});
-
-	test("shows found extrinsics by name", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=balances.transfer", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		await removeContent(page.locator("[data-test=extrinsics-table] tr td"));
-		await takeScreenshot("search-extrinsics-by-name");
-	});
-
-	test("shows found extrinsics by pallet name", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=balances", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		await removeContent(page.locator("[data-test=extrinsics-table] tr td"));
-		await takeScreenshot("search-extrinsics-by-pallet-name");
-	});
-
-	test("shows found events by name", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=balances.transfer", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("events-tab").click();
-
-		await removeContent(page.locator("[data-test=events-table] tr td"));
-		await takeScreenshot("search-events-by-name");
-	});
-
-	test("shows found events by pallet name", async ({ page, takeScreenshot }) => {
-		await navigate(page, "/kusama/search?query=balances", {waitUntil: "data-loaded"});
-
-		await page.getByTestId("events-tab").click();
-
-		await removeContent(page.locator("[data-test=events-table] tr td"));
-		await takeScreenshot("search-events-by-pallet-name");
-	});
-
-	test("shows not found message if nothing was found by hash", async ({ page, takeScreenshot }) => {
-		const query = "0x123456789";
-
-		await navigate(page, `/kusama/search?query=${query}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(`Nothing was found for query ${query}`);
-
-		await takeScreenshot("search-not-found");
-	});
-
-	test("shows not found message if nothing was found by height", async ({ page, takeScreenshot }) => {
-		const query = "999999999";
-
-		await navigate(page, `/kusama/search?query=${query}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(`Nothing was found for query ${query}`);
-	});
-
-	test("shows not found message if nothing was found by name", async ({ page, takeScreenshot }) => {
-		const query = "balances.non_existing_call";
-
-		await navigate(page, `/kusama/search?query=${query}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("not-found");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(`Nothing was found for query ${query}`);
-	});
-
-	test("shows error message when search for extrinsic by hash fails", async ({ page, takeScreenshot }) => {
-		const hash = "0x162bd24c5f19b9fee4a33d11c2908d73d5b0d6c428cf0f1eecdf568c346b26";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsic"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsic search error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/search?query=${hash}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(new RegExp(hash));
-		await expect(errorMessage).toHaveText(/Extrinsic search error/);
-
-		await takeScreenshot("search-extrinsic-by-hash-error");
-	});
-
-	test("shows error message when search for block by hash fails", async ({ page, takeScreenshot }) => {
-		const hash = "0xe9bc2f7f23685d545bfcb71ea59140700f83868300123fcb04f4872b189742";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("block"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Block search error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/search?query=${hash}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(new RegExp(hash));
-		await expect(errorMessage).toHaveText(/Block search error/);
-
-		await takeScreenshot("search-block-by-hash-error");
-	});
-
-	test("shows error message when search for block by height fails", async ({ page, takeScreenshot }) => {
-		const height = 123;
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("block"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Block search error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/search?query=${height}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(new RegExp(height.toString()));
-		await expect(errorMessage).toHaveText(/Block search error/);
-
-		await takeScreenshot("search-block-by-height-error");
-	});
-
-	test("shows error message when search for extrinsics by name fails", async ({ page, takeScreenshot }) => {
-		const name = "Timestamp.set";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsicsConnection"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsics search error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/search?query=${name}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(new RegExp(name));
-		await expect(errorMessage).toHaveText(/Extrinsics search error/);
-
-		await takeScreenshot("search-extrinsics-by-name-error");
-	});
-
-	test("shows error message when search for events by name fails", async ({ page, takeScreenshot }) => {
-		const name = "System.ExtrinsicSuccess";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("eventsConnection"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Events search error"
-					}]
-				})
-			})
-		);
-
-		await navigate(page, `/kusama/search?query=${name}`, {waitUntil: "data-loaded"});
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(new RegExp(name));
-		await expect(errorMessage).toHaveText(/Events search error/);
-
-		await takeScreenshot("search-events-by-name-error");
-	});
-
-	test("shows error message in events tab when events search by name fails while searching for extrinsics by name", async ({ page, takeScreenshot }) => {
-		const extrinsicsName = "Balances.transfer";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("eventsConnection"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Events search error"
-					}]
-				})
-			}),
-		);
-
-		await navigate(page, `/kusama/search?query=${extrinsicsName}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("events-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Events search error/);
-
-		await takeScreenshot("search-extrinsics-by-name-with-events-error");
-	});
-
-	test("shows error message in extrinsics tab when extrinsics search by name fails while searching for events by name", async ({ page, takeScreenshot }) => {
-		const eventName = "Balances.Transfer";
-
-		mockRequest(
-			page,
-			(request) => request.postData()?.match("extrinsicsConnection"),
-			(route) => route.fulfill({
-				status: 200,
-				body: JSON.stringify({
-					errors: [{
-						message: "Extrinsics search error"
-					}]
-				})
-			}),
-		);
-
-		await navigate(page, `/kusama/search?query=${eventName}`, {waitUntil: "data-loaded"});
-
-		await page.getByTestId("extrinsics-tab").click();
-
-		const errorMessage = page.getByTestId("error");
-		await expect(errorMessage).toBeVisible();
-		await expect(errorMessage).toHaveText(/Unexpected error/);
-		await expect(errorMessage).toHaveText(/Extrinsics search error/);
-
-		await takeScreenshot("search-events-by-name-with-extrinsics-error");
-	});
-});
diff --git a/test/e2e/templates/model.ts b/test/e2e/templates/model.ts
new file mode 100644
index 00000000..10cd3a99
--- /dev/null
+++ b/test/e2e/templates/model.ts
@@ -0,0 +1,13 @@
+import { SquidRequestOptions } from "../../utils/matchSquidRequest";
+
+export type RequestDataType = "item" | "items" | "itemsConnection";
+
+export interface RequestOptions extends SquidRequestOptions {
+	queryProp: string|string[];
+	dataType: RequestDataType;
+}
+
+export interface TestItem {
+	name: string;
+	requests: RequestOptions[];
+}
diff --git a/test/e2e/templates/testItemError.ts b/test/e2e/templates/testItemError.ts
new file mode 100644
index 00000000..41aabcb7
--- /dev/null
+++ b/test/e2e/templates/testItemError.ts
@@ -0,0 +1,47 @@
+import { matchSquidRequest } from "../../utils/matchSquidRequest";
+import { navigate } from "../../utils/navigate";
+import { upperFirst } from "../../utils/upperFirst";
+import { useDataFixture } from "../../utils/useDataFixture";
+
+import { expect, test } from "../../test";
+
+import { TestItem } from "./model";
+
+export function testItemError(url: string, item: TestItem) {
+	test(`shows error message if ${item.name} info fetch fails`, async ({ page, takeScreenshot }) => {
+		const errorMessage = `${upperFirst(item.name)} error`;
+
+		await page.route("**/*", (route) => {
+			for (const request of item.requests) {
+				if (matchSquidRequest(route.request(), request)) {
+					return route.fulfill({
+						status: 200,
+						body: JSON.stringify({
+							errors: [{
+								message: errorMessage
+							}]
+						})
+					});
+				}
+			}
+
+			route.fallback();
+		});
+
+		await navigate(page, url);
+
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $error = $info.getByTestId("error");
+
+		await expect($header).toHaveText(
+			await useDataFixture(`${item.name}-info-data`, "errorHeader", $header)
+		);
+
+		await expect($error).toHaveText(
+			await useDataFixture(`${item.name}-info-data`, "error", $error)
+		);
+
+		await takeScreenshot(`${item.name}-error`, $info);
+	});
+}
diff --git a/test/e2e/templates/testItemInfo.ts b/test/e2e/templates/testItemInfo.ts
new file mode 100644
index 00000000..e47c7031
--- /dev/null
+++ b/test/e2e/templates/testItemInfo.ts
@@ -0,0 +1,27 @@
+import { getTableData } from "../../utils/getTableData";
+import { navigate } from "../../utils/navigate";
+import { useDataFixture } from "../../utils/useDataFixture";
+
+import { expect, test } from "../../test";
+
+import { TestItem } from "./model";
+
+export function testItemInfo(url: string, item: TestItem) {
+	test(`shows ${item.name} info`, async ({ page, takeScreenshot }) => {
+		await navigate(page, url);
+
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $infoTable = $info.locator("table").first();
+
+		await expect($header).toHaveText(
+			await useDataFixture(`${item.name}-info-data`, "header", $header)
+		);
+
+		await expect($infoTable).toHaveTableData(
+			await useDataFixture(`${item.name}-info-data`, "infoTable", $infoTable, getTableData)
+		);
+
+		await takeScreenshot(`${item.name}-info`, $info);
+	});
+}
diff --git a/test/e2e/templates/testItemNotFound.ts b/test/e2e/templates/testItemNotFound.ts
new file mode 100644
index 00000000..12e8bec9
--- /dev/null
+++ b/test/e2e/templates/testItemNotFound.ts
@@ -0,0 +1,38 @@
+import { matchSquidRequest } from "../../utils/matchSquidRequest";
+import { navigate } from "../../utils/navigate";
+import { useDataFixture } from "../../utils/useDataFixture";
+
+import { expect, test } from "../../test";
+
+import { TestItem } from "./model";
+import { getNotFoundData } from "./utils";
+
+export function testItemNotFound(url: string, item: TestItem) {
+	test(`shows not found message if ${item.name} was not found`, async ({ page, takeScreenshot }) => {
+		await page.route("**/*", (route) => {
+			for (const request of item.requests) {
+				if (matchSquidRequest(route.request(), request)) {
+					return route.fulfill(getNotFoundData(request));
+				}
+			}
+
+			route.fallback();
+		});
+
+		await navigate(page, url);
+
+		const $info = page.getByTestId("item-info");
+		const $header = $info.getByTestId("item-header");
+		const $notFound = $info.getByTestId("not-found");
+
+		await expect($header).toHaveText(
+			await useDataFixture(`${item.name}-info-data`, "notFoundHeader", $header)
+		);
+
+		await expect($notFound).toHaveText(
+			await useDataFixture(`${item.name}-info-data`, "notFound", $notFound)
+		);
+
+		await takeScreenshot(`${item.name}-not-found`, $info);
+	});
+}
diff --git a/test/e2e/templates/testRedirect.ts b/test/e2e/templates/testRedirect.ts
new file mode 100644
index 00000000..1bf9415d
--- /dev/null
+++ b/test/e2e/templates/testRedirect.ts
@@ -0,0 +1,10 @@
+import { navigate } from "../../utils/navigate";
+
+import { test } from "../../test";
+
+export function testRedirect(description: string, fromUrl: string, toUrl: string) {
+	test(description, async ({ page }) => {
+		await navigate(page, fromUrl);
+		await page.waitForURL((url: URL) => !!url.toString().match(toUrl));
+	});
+}
diff --git a/test/e2e/templates/testRelatedItems.ts b/test/e2e/templates/testRelatedItems.ts
new file mode 100644
index 00000000..dba29a56
--- /dev/null
+++ b/test/e2e/templates/testRelatedItems.ts
@@ -0,0 +1,48 @@
+import pluralize from "pluralize";
+
+import { getTableData } from "../../utils/getTableData";
+import { navigate } from "../../utils/navigate";
+import { useDataFixture } from "../../utils/useDataFixture";
+
+import { test, expect } from "../../test";
+
+import { TestItem } from "./model";
+
+export interface TestRelatedItemsOptions {
+	testCount?: boolean;
+	wrapperTestId?: string;
+}
+
+export function testRelatedItems(url: string, item: TestItem, relatedItem: TestItem, options: TestRelatedItemsOptions = {}) {
+	test(`shows ${pluralize(relatedItem.name)}`, async ({ page, takeScreenshot }) => {
+		await navigate(page, url);
+
+		const $relatedItems = page.getByTestId(options.wrapperTestId || "related-items");
+		const $relatedItemsTab = $relatedItems.getByTestId(`${pluralize(relatedItem.name)}-tab`);
+		const $relatedItemsTable = $relatedItems.getByTestId(`${pluralize(relatedItem.name)}-items`).locator("table").first();
+
+		await $relatedItemsTab.click();
+
+		if (options.testCount || options.testCount === undefined) {
+			const $relatedItemsCount = $relatedItemsTab.getByTestId("count");
+			await expect($relatedItemsCount).toHaveText(
+				await useDataFixture(
+					`${item.name}-${pluralize(relatedItem.name)}-data`,
+					"itemsCount",
+					$relatedItemsCount,
+				)
+			);
+		}
+
+		await expect($relatedItemsTable).toHaveTableData(
+			await useDataFixture(
+				`${item.name}-${pluralize(relatedItem.name)}-data`,
+				"itemsTable",
+				$relatedItemsTable,
+				getTableData
+			)
+		);
+
+		await takeScreenshot(`${item.name}-${pluralize(relatedItem.name)}`, $relatedItems);
+	});
+}
diff --git a/test/e2e/templates/testRelatedItemsError.ts b/test/e2e/templates/testRelatedItemsError.ts
new file mode 100644
index 00000000..d61f9c67
--- /dev/null
+++ b/test/e2e/templates/testRelatedItemsError.ts
@@ -0,0 +1,56 @@
+import pluralize from "pluralize";
+
+import { matchSquidRequest } from "../../utils/matchSquidRequest";
+import { navigate } from "../../utils/navigate";
+import { useDataFixture } from "../../utils/useDataFixture";
+
+import { expect, test } from "../../test";
+
+import { RequestOptions, TestItem } from "./model";
+
+export interface TestRelatedItemsOptions {
+	wrapperTestId?: string;
+	clickTab?: boolean;
+}
+
+export function testRelatedItemsError(url: string, item: TestItem, relatedItem: TestItem, requestsToFail: RequestOptions[], options: TestRelatedItemsOptions = {}) {
+	const {wrapperTestId = "related-items", clickTab = true} = options;
+
+	test(`shows error message when ${relatedItem.name} items fetch fails`, async ({ page, takeScreenshot }) => {
+		const errorMessage = `${pluralize(relatedItem.name)} error`;
+
+		await page.route("**/*", (route) => {
+			for (const request of requestsToFail) {
+				if (matchSquidRequest(route.request(), request)) {
+					return route.fulfill({
+						status: 200,
+						body: JSON.stringify({
+							errors: [{
+								message: errorMessage
+							}]
+						})
+					});
+				}
+			}
+
+			route.fallback();
+		});
+
+		await navigate(page, url);
+
+		const $relatedItems = page.getByTestId(wrapperTestId);
+		const $relatedItemsError = $relatedItems.getByTestId("error");
+
+		if (clickTab) {
+			const $relatedItemsTab = $relatedItems.getByTestId(`${pluralize(relatedItem.name)}-tab`);
+			await $relatedItemsTab.click();
+		}
+
+		await expect($relatedItemsError).toBeVisible();
+		await expect($relatedItemsError).toHaveText(
+			await useDataFixture(`${item.name}-${pluralize(relatedItem.name)}-data`, "error", $relatedItemsError)
+		);
+
+		await takeScreenshot(`${item.name}-${pluralize(relatedItem.name)}-error`, $relatedItems);
+	});
+}
diff --git a/test/e2e/templates/utils.ts b/test/e2e/templates/utils.ts
new file mode 100644
index 00000000..4823fe33
--- /dev/null
+++ b/test/e2e/templates/utils.ts
@@ -0,0 +1,71 @@
+import pluralize from "pluralize";
+
+import { emptyItemsResponse } from "../../../src/utils/itemsResponse";
+import { matchSquidRequest } from "../../utils/matchSquidRequest";
+import { useRequestFixture } from "../../utils/useRequestFixture";
+
+import { test } from "../../test";
+
+import { RequestDataType, RequestOptions, TestItem } from "./model";
+
+export function getNotFoundData(request: RequestOptions) {
+	const { queryProp, dataType } = request;
+
+	let data: any = null;
+
+	switch (dataType) {
+		case "item":
+			data = null;
+			break;
+		case "items":
+			data = [];
+			break;
+		case "itemsConnection":
+			data = {
+				edges: [],
+				pageInfo: {
+					startCursor: "",
+					endCursor: "",
+					hasPreviousPage: false,
+					hasNextPage: false
+				},
+				totalCount: 0
+			};
+			break;
+	}
+
+	const queryProps = Array.isArray(queryProp) ? queryProp : [queryProp];
+
+	return {
+		status: 200,
+		body: JSON.stringify({
+			data: Object.fromEntries(queryProps.map(it => [it, data]))
+		})
+	};
+}
+
+export function mockRequestsWithFixture(item: TestItem, relatedItems: TestItem[] = []) {
+	test.beforeEach(async ({ page }) => {
+		await page.route("**/*", async (route) => {
+			for (const request of item.requests) {
+				if (matchSquidRequest(route.request(), request)) {
+					return route.fulfill(
+						await useRequestFixture(`${item.name}-info-request`, route)
+					);
+				}
+			}
+
+			for (const relatedItem of relatedItems) {
+				for (const request of relatedItem.requests) {
+					if (matchSquidRequest(route.request(), request)) {
+						return route.fulfill(
+							await useRequestFixture(`${item.name}-${pluralize(relatedItem.name)}-request`, route)
+						);
+					}
+				}
+			}
+
+			await route.fallback();
+		});
+	});
+}
diff --git a/test/fixtures/takeScreenshotFixture.ts b/test/fixtures/takeScreenshotFixture.ts
new file mode 100644
index 00000000..f0dfcc12
--- /dev/null
+++ b/test/fixtures/takeScreenshotFixture.ts
@@ -0,0 +1,24 @@
+import path from "path";
+
+import { Locator, PlaywrightTestArgs, TestFixture } from "@playwright/test";
+
+import config from "../../playwright.config";
+
+import { takeScreenshot } from "../utils/takeScreenshot";
+
+export type TakeScreenshotFixture = (name: string, element?: Locator, dir?: string) => Promise<Buffer>;
+
+export const takeScreenshotFixture: TestFixture<TakeScreenshotFixture, PlaywrightTestArgs> = async ({ page }, use, testInfo) => {
+	const useTakeScreenshot = async (name: string, element?: Locator, dir?: string) => {
+		dir = dir || config.screenshotsDir;
+		const body = await takeScreenshot(page, element, path.join(dir, `${name}-${testInfo.project.name}.png`));
+		testInfo.attach(name, { body, contentType: "image/png" });
+		return body;
+	};
+
+	await use(useTakeScreenshot);
+
+	if (testInfo.status !== testInfo.expectedStatus) {
+		await useTakeScreenshot("test-failed", undefined, testInfo.outputDir);
+	}
+};
diff --git a/test/matchers/toHaveTableData.ts b/test/matchers/toHaveTableData.ts
new file mode 100644
index 00000000..2c30879b
--- /dev/null
+++ b/test/matchers/toHaveTableData.ts
@@ -0,0 +1,50 @@
+import { expect as baseExpect, Locator } from "@playwright/test";
+import { createHash } from "crypto";
+import colors from "colors";
+
+import config from "../../playwright.config";
+
+import { getTableData } from "../utils/getTableData";
+import { addAttachment } from "../utils/addAttachment";
+
+export async function toHaveTableData(locator: Locator, expected: string[][], options?: { timeout?: number }) {
+	try {
+		await baseExpect(async () => {
+			const tableData = await getTableData(locator);
+
+			baseExpect(tableData.length, "Table has unexpected number of rows").toBe(expected.length);
+
+			for (let i = 0; i < tableData.length; ++i) {
+				baseExpect(tableData[i], `Row number ${i + 1} has unexpected data`).toEqual(expected[i]);
+			}
+		}).toPass({
+			timeout: options?.timeout || config.expect?.timeout
+		});
+
+		return {
+			message: () => "Tables data are equal",
+			pass: true
+		};
+	} catch (e) {
+		const tableData = await getTableData(locator);
+
+		const hash = createHash("md5").update(JSON.stringify(tableData)).digest("hex").slice(0, 10);
+
+		const attachment = addAttachment(
+			`table data #${hash}`,
+			`fixtures/table_data_${hash}.json`,
+			"application/json",
+			JSON.stringify(tableData, null, 2)
+		);
+
+		const errorMessage = [
+			e.matcherResult.message,
+			colors.yellow(`Fixture with current table data is recorded into the attachment '${attachment.name}' (${attachment.path})`)
+		].join("\n\n");
+
+		return {
+			...e.matcherResult,
+			message: () => errorMessage
+		};
+	}
+}
diff --git a/test/test.ts b/test/test.ts
new file mode 100644
index 00000000..2b2be1ad
--- /dev/null
+++ b/test/test.ts
@@ -0,0 +1,16 @@
+import { test as baseTest, expect as baseExpect } from "@playwright/test";
+
+import { TakeScreenshotFixture, takeScreenshotFixture } from "./fixtures/takeScreenshotFixture";
+import { toHaveTableData } from "./matchers/toHaveTableData";
+
+type TestFixtures = {
+	takeScreenshot: TakeScreenshotFixture;
+};
+
+export const test = baseTest.extend<TestFixtures>({
+	takeScreenshot: [takeScreenshotFixture, {auto: true}],
+});
+
+export const expect = baseExpect.extend({
+	toHaveTableData
+});
diff --git a/test/utils/addAttachment.ts b/test/utils/addAttachment.ts
new file mode 100644
index 00000000..e07ec300
--- /dev/null
+++ b/test/utils/addAttachment.ts
@@ -0,0 +1,39 @@
+import fs from "fs";
+import path from "path";
+
+import config from "../../playwright.config";
+
+import { expect, test } from "../test";
+
+/**
+ * Add test attachment with fixed path.
+ *
+ * Attachment is added only once if called multiple times.
+ *
+ * @param name Attachment name
+ * @param relativeFilepath Attachemnt filepath relative to {config.outputDir}
+ * @param contentType Content type
+ * @returns
+ */
+export function addAttachment(name: string, relativeFilepath: string, contentType: string, data?: any) {
+	const attachment = {
+		name,
+		contentType,
+		path: path.join(config.outputDir!, relativeFilepath),
+	};
+
+	const existingAttachment = test.info().attachments.find(it => it.name === name);
+
+	if (!existingAttachment) {
+		test.info().attachments.push(attachment);
+
+		if (!fs.existsSync(attachment.path)) {
+			fs.mkdirSync(path.dirname(attachment.path), { recursive: true });
+			fs.writeFileSync(attachment.path, data || "");
+		}
+	} else {
+		expect(existingAttachment).toEqual(attachment);
+	}
+
+	return attachment;
+}
diff --git a/test/utils/editJsonFile.ts b/test/utils/editJsonFile.ts
new file mode 100644
index 00000000..ee0bf404
--- /dev/null
+++ b/test/utils/editJsonFile.ts
@@ -0,0 +1,9 @@
+import fs from "fs";
+
+export function editJsonFile(filepath: string, editFn: (data: any) => any) {
+	let json = JSON.parse(fs.readFileSync(filepath, "utf-8"));
+
+	json = editFn(json);
+
+	fs.writeFileSync(filepath, JSON.stringify(json, null, 2));
+}
diff --git a/test/utils/getTableData.ts b/test/utils/getTableData.ts
new file mode 100644
index 00000000..25f8f58a
--- /dev/null
+++ b/test/utils/getTableData.ts
@@ -0,0 +1,23 @@
+import { Locator } from "@playwright/test";
+
+import { hideElements } from "./hideSelectors";
+
+const hideSelectors = [
+	"[data-test=time][data-time-format=fromNow]"
+];
+
+export async function getTableData(locator: Locator) {
+	await hideElements(locator.page(), hideSelectors, true);
+
+	const rows = await locator.locator("> tbody > tr").all();
+
+	const tableData: string[][] = [];
+
+	for (const row of rows) {
+		tableData.push(await row.locator("> td").allInnerTexts());
+	}
+
+	await hideElements(locator.page(), hideSelectors, false);
+
+	return tableData;
+}
diff --git a/test/utils/getTestFixturesDir.ts b/test/utils/getTestFixturesDir.ts
new file mode 100644
index 00000000..1bcaca8c
--- /dev/null
+++ b/test/utils/getTestFixturesDir.ts
@@ -0,0 +1,7 @@
+import path from "path";
+
+import { getTestSpecFile } from "./getTestSpecFile";
+
+export function getTestFixturesDir() {
+	return path.join(path.dirname(getTestSpecFile()), "fixtures");
+}
diff --git a/test/utils/getTestSpecFile.ts b/test/utils/getTestSpecFile.ts
new file mode 100644
index 00000000..3ecabbb4
--- /dev/null
+++ b/test/utils/getTestSpecFile.ts
@@ -0,0 +1,9 @@
+import path from "path";
+
+import config from "../../playwright.config";
+
+import { test } from "../test";
+
+export function getTestSpecFile() {
+	return path.join(__dirname, "..", "..", config.testDir!, test.info().titlePath[0]);
+}
diff --git a/test/utils/hideSelectors.ts b/test/utils/hideSelectors.ts
new file mode 100644
index 00000000..824cf7e8
--- /dev/null
+++ b/test/utils/hideSelectors.ts
@@ -0,0 +1,11 @@
+import { Page } from "@playwright/test";
+
+export async function hideElements(page: Page, selectors: string[], hide = true) {
+	await page.evaluate(([selectors, hide]) => {
+		for (const selector of selectors) {
+			for (const el of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
+				el.style.display = hide ? "none" : "";
+			}
+		}
+	}, [selectors, hide] as const);
+}
diff --git a/test/utils/matchSquidRequest.ts b/test/utils/matchSquidRequest.ts
new file mode 100644
index 00000000..f18ea2b1
--- /dev/null
+++ b/test/utils/matchSquidRequest.ts
@@ -0,0 +1,37 @@
+import { Request } from "@playwright/test";
+
+import { getNetwork } from "../../src/services/networksService";
+import { isSubset } from "../../src/utils/object";
+
+export interface SquidRequestOptions {
+	squidType: string;
+	network?: string;
+	queryProp?: string|string[];
+	variables?: any;
+}
+
+export function matchSquidRequest(request: Request, options: SquidRequestOptions) {
+	const {squidType, network: networkName, queryProp, variables} = options;
+
+	const network = networkName ? getNetwork(networkName) : undefined;
+
+	if (!request.url().match(squidType === "archive"
+		? `${network || ""}.explorer.subsquid.io`
+		: `squid.subsquid.io/${squidType}-${network?.name || ""}`)
+	) {
+		return false;
+	}
+
+	const queryProps = Array.isArray(queryProp) ? queryProp : [queryProp];
+	const query = request.postDataJSON()?.query;
+
+	if (queryProp && queryProps.some(it => !query.match(new RegExp(`${it}\\:|(?<!\\:\\s*)${it}\\(`)))) {
+		return false;
+	}
+
+	if (variables && !isSubset(variables, request.postDataJSON()?.variables)) {
+		return false;
+	}
+
+	return true;
+}
diff --git a/test/utils/mockRequest.ts b/test/utils/mockRequest.ts
deleted file mode 100644
index 5cba8794..00000000
--- a/test/utils/mockRequest.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Page, Request, Route } from "@playwright/test";
-
-export async function mockRequest(page: Page, requestMatcher: (request: Request) => boolean|any, fulfill: (route: Route) => any) {
-	await page.route("**/*", (route) => {
-		const request = route.request();
-
-		if (requestMatcher(request)) {
-			fulfill(route);
-		} else {
-			route.continue();
-		}
-	});
-}
diff --git a/test/utils/screenshot.ts b/test/utils/takeScreenshot.ts
similarity index 59%
rename from test/utils/screenshot.ts
rename to test/utils/takeScreenshot.ts
index 73b97c9e..9f5dae9a 100644
--- a/test/utils/screenshot.ts
+++ b/test/utils/takeScreenshot.ts
@@ -1,51 +1,45 @@
 import { Locator, Page } from "@playwright/test";
 
+import { hideElements } from "./hideSelectors";
+
 const hideSelectors = [
 	".MuiTabs-indicator",
-	"[data-test=count]",
-	"[data-test=time]"
+	".MuiTab-root .MuiCircularProgress-root",
+	"[data-test=time][data-time-format=fromNow]"
 ];
 
-export async function screenshot(page: Page, element: Locator|undefined, path: string) {
-	await page.evaluate((hideSelectors) => {
+export async function takeScreenshot(page: Page, element: Locator|undefined, path: string) {
+	await hideElements(page, hideSelectors, true);
+
+	await page.evaluate(() => {
 		const topBar = document.querySelector<HTMLElement>("[data-test=top-bar");
 		if (topBar) {
 			topBar.style.position = "relative";
 		}
 
-		for (const selector of hideSelectors) {
-			for (const el of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
-				el.style.display = "none";
-			}
-		}
-
 		// open error details
 		for (const el of Array.from(document.querySelectorAll<HTMLDetailsElement>("[data-test=error] details"))) {
 			el.open = true;
 		}
-	}, hideSelectors);
+	});
 
 	const screenshot = element
 		? await element.screenshot({path, animations: "disabled"})
 		: await page.screenshot({path, fullPage: true, animations: "disabled"});
 
-	await page.evaluate((hideSelectors) => {
+	await page.evaluate(() => {
 		const topBar = document.querySelector<HTMLElement>("[data-test=top-bar");
 		if (topBar) {
 			topBar.style.position = "";
 		}
 
-		for (const selector of hideSelectors) {
-			for (const el of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
-				el.style.display = "";
-			}
-		}
-
 		// open error details
 		for (const el of Array.from(document.querySelectorAll<HTMLDetailsElement>("[data-test=error] details"))) {
 			el.open = false;
 		}
-	}, hideSelectors);
+	});
+
+	await hideElements(page, hideSelectors, false);
 
 	return screenshot;
 }
diff --git a/test/utils/test.ts b/test/utils/test.ts
deleted file mode 100644
index f66eec7c..00000000
--- a/test/utils/test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Locator, test as testBase } from "@playwright/test";
-import path from "path";
-
-import config from "../../playwright.config";
-
-import { screenshot } from "./screenshot";
-
-type TestFixtures = {
-	takeScreenshot: (name: string, element?: Locator) => Promise<Buffer>;
-};
-
-export const test = testBase.extend<TestFixtures>({
-	takeScreenshot: [async ({ page }, use, testInfo) => {
-		const takeScreenshot = async (name: string, element?: Locator, dir?: string) => {
-			dir = dir || config.screenshotsDir;
-			const body = await screenshot(page, element, path.join(dir, `${name}-${testInfo.project.name}.png`));
-			testInfo.attach(name, { body, contentType: "image/png" });
-			return body;
-		};
-
-		await use(takeScreenshot);
-
-		if (testInfo.status !== testInfo.expectedStatus) {
-			await takeScreenshot("test-failed", undefined, testInfo.outputDir);
-		}
-	}, {auto: true}]
-});
-
-export { expect } from "@playwright/test";
diff --git a/test/utils/upperFirst.ts b/test/utils/upperFirst.ts
new file mode 100644
index 00000000..c5a17f5e
--- /dev/null
+++ b/test/utils/upperFirst.ts
@@ -0,0 +1,3 @@
+export function upperFirst(str: string) {
+	return `${str[0].toUpperCase()}${str.slice(1)}`;
+}
diff --git a/test/utils/useDataFixture.ts b/test/utils/useDataFixture.ts
new file mode 100644
index 00000000..be2be651
--- /dev/null
+++ b/test/utils/useDataFixture.ts
@@ -0,0 +1,53 @@
+import fs from "fs";
+import path from "path";
+import colors from "colors";
+
+import { Locator } from "@playwright/test";
+
+import { expect } from "../test";
+
+import { addAttachment } from "./addAttachment";
+import { editJsonFile } from "./editJsonFile";
+import { getTestFixturesDir } from "./getTestFixturesDir";
+
+export async function useDataFixture(fixtureName: string, key: string, locator: Locator, getData?: (locator: Locator) => any|Promise<any>) {
+	const fixtureFile = path.join(getTestFixturesDir(), `${fixtureName}.json`);
+
+	const fixtures = fs.existsSync(fixtureFile)
+		? JSON.parse(fs.readFileSync(fixtureFile, "utf-8"))
+		: {};
+
+	let fixture = fixtures[key];
+
+	const recordedFixtureAttachment = addAttachment(
+		`fixtures ${fixtureName}`,
+		`fixtures/${fixtureName}.json`,
+		"application/json",
+		"{}"
+	);
+
+	if (!fixture) {
+		await expect(locator).toBeVisible();
+
+		// to record the data, we need the data to be fully loaded
+		// but we can't wait for it reliably without knowing the data
+		// so at least wait some timeout after the element is visible
+		await locator.page().waitForTimeout(5000);
+
+		fixture = getData
+			? await getData(locator)
+			: await locator.textContent();
+
+		expect.soft(undefined, [
+			`${colors.red(`missing data fixture '${key}'`)} in '${fixtureFile}'`,
+			colors.yellow(`Fixture with current table data is recorded into the attachment '${recordedFixtureAttachment.name}' (${recordedFixtureAttachment.path})`)
+		].join("\n\n")).toBeTruthy();
+	}
+
+	editJsonFile(recordedFixtureAttachment.path, (data) => ({
+		...data,
+		[key]: fixture
+	}));
+
+	return fixture;
+}
diff --git a/test/utils/useRequestFixture.ts b/test/utils/useRequestFixture.ts
new file mode 100644
index 00000000..c0b5bb35
--- /dev/null
+++ b/test/utils/useRequestFixture.ts
@@ -0,0 +1,95 @@
+import fs from "fs";
+import path from "path";
+import { isDeepStrictEqual } from "util";
+import colors from "colors";
+
+import { Route } from "@playwright/test";
+
+import { expect } from "../test";
+
+import { addAttachment } from "./addAttachment";
+import { getTestFixturesDir } from "./getTestFixturesDir";
+import { editJsonFile } from "./editJsonFile";
+
+export interface RequestProps {
+	url: string;
+	method: string;
+	postData: any;
+}
+
+export interface ResponseProps {
+	status: number;
+	body: any;
+}
+
+export interface RequestFixture {
+	request: RequestProps;
+	response: ResponseProps;
+}
+
+export async function useRequestFixture(fixtureName: string, route: Route, filterResponse: (response: ResponseProps) => boolean = () => true) {
+	const request = route.request();
+
+	const requestProps: RequestProps = {
+		url: request.url(),
+		method: request.method(),
+		postData: request.postDataJSON()
+	};
+
+	const fixtureFile = path.join(getTestFixturesDir(), `${fixtureName}.json`);
+
+	const requestFixtures: RequestFixture[] = fs.existsSync(fixtureFile)
+		? JSON.parse(fs.readFileSync(fixtureFile, "utf-8"))
+		: [];
+
+	let requestFixture = requestFixtures.find(it => isDeepStrictEqual(requestProps, it.request));
+
+	const recordedFixtureAttachment = addAttachment(
+		`fixtures ${fixtureName}`,
+		`fixtures/${fixtureName}.json`,
+		"application/json",
+		"[]"
+	);
+
+	if (!requestFixture) {
+		const response = await route.fetch();
+
+		const body = response.headers()["content-type"]?.match("application/json")
+			? await response.json()
+			: await response.text();
+
+		requestFixture = {
+			request: requestProps,
+			response: {
+				status: response.status(),
+				body
+			}
+		};
+
+		if (!filterResponse(requestFixture.response)) {
+			return {
+				response
+			};
+		}
+
+		expect.soft(undefined, [
+			`${colors.red("missing request fixture")} in '${fixtureFile}'`,
+			colors.cyan(`Request: ${JSON.stringify(requestProps, null, 2)}`),
+			colors.yellow(`Fixture with current response is recorded into the attachment '${recordedFixtureAttachment.name}' (${recordedFixtureAttachment.path})`)
+		].join("\n\n")).toBeTruthy();
+	}
+
+	editJsonFile(recordedFixtureAttachment.path, (data) => {
+		if (!data.find((it: RequestFixture) => isDeepStrictEqual(requestProps, it.request))) {
+			return [...data, requestFixture];
+		}
+
+		return data;
+	});
+
+	return {
+		status: requestFixture.response.status,
+		body: JSON.stringify(requestFixture.response.body)
+	};
+}
+

From 1070280b46a8939fbea26f654dee81b4e1986b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Tue, 28 Nov 2023 20:22:59 +0100
Subject: [PATCH 21/21] increase expect timeout

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index ba46389b..324de4d6 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -19,7 +19,7 @@ const config: Config = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-		timeout: 5000
+		timeout: 10000
 	},
 	/* Run tests in files in parallel */
 	fullyParallel: true,