From 238ad4a217666b4e8ae93a0b3172c739ca2fdf7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Jedli=C4=8Dka?= <jedlicka.r@gmail.com>
Date: Mon, 22 Jan 2024 13:16:42 +0100
Subject: [PATCH] .

---
 README.md                        |  31 ++
 src/components/NetworkSelect.tsx | 159 ++++-----
 src/networks.json                | 545 +------------------------------
 src/screens/home.tsx             |  65 ++--
 4 files changed, 113 insertions(+), 687 deletions(-)

diff --git a/README.md b/README.md
index f9d04729..a90870b1 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,13 @@ Calamar is a block explorer for Polkadot, Kusama and their parachains. The explo
 
 This app is based on [Create React App](https://facebook.github.io/create-react-app/docs/getting-started).
 
+> [!WARNING]
+> Since January 31, Calamar and its data source can only be **self-hosted**.
+> This is following the deprecation of Firesquid archives and its resulting effect on Giant Squid.
+> We apologize for any inconvenience.
+>
+> To setup data sources follow this guide.
+
 ## Setup
 
 Clone the repo and install the NPM dependencies.
@@ -14,6 +21,30 @@ $ cd calamar
 $ npm install
 ```
 
+Edit `src/networks.json` and configure your network and its data source's endpoints.
+
+<details>
+	<summary>Network configuration structure</summary>
+
+- **name**: network identificator used in url's etc (required, `"polkadot"`)
+- **displayName**: name of the network to be displayed in the app (required, `"Polkadot"`)
+- **icon**: path to icon asset (required, e.g. `"/assets/network-icons/polkadot.svg"`)
+- **color**: color associated with the network (optional, e.g. `"#e6007a"`)
+- **website**: website of the network (optional, e.g. `"https://polkadot.network/"`)
+- **parachainId**: id of the parachaing (optional, e.g. `0`)
+- **relayChain**: `name` of relay chain network (optional, e.g. `"polkadot"`)
+- **prefix**: SS58 prefix (required, e.g. `0`)
+- **decimals**: number of decimal for the network's symbol (required, e.g. `10`)
+- **symbol**: network's symbol (required, `"DOT"`)
+- **squids**:
+	- **archive**: GraphQL API explorer of the Firesquid archive (required, e.g. `"https://polkadot.explorer.subsquid.io/graphql"`)
+	- **explorer**: GiantSquid explorer squid (optional, but highly recommended, e.g. `"https://squid.subsquid.io/gs-explorer-polkadot/graphql"`)
+	- **main**: GiantSquid main squid (optional, e.g. `"https://squid.subsquid.io/gs-main-polkadot/graphql"`)
+	- **identites**: GiantSquid main squid if it contains indentity data (optional, e.g. `"https://squid.subsquid.io/gs-main-polkadot/graphql"`)
+	- **stats**: GianSquid stats squid (optional, e.g. `"https://squid.subsquid.io/gs-stats-polkadot/graphql"`)
+- **coinGeckoId**: CoinGecko network ID to fetch USD values (optional, `"polkadot"`)
+</details>
+
 ## Run locally
 
 To start the application locally, run the command
diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
index c8b716db..1343e5df 100644
--- a/src/components/NetworkSelect.tsx
+++ b/src/components/NetworkSelect.tsx
@@ -1,14 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { useCallback, useState } from "react";
-import { Button, ButtonProps, Checkbox, Divider, ListItem, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem } from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
+import { Button, ButtonProps, Checkbox, Divider, ListItemIcon, ListItemText, 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 { css } from "@emotion/react";
 
-import { useNetworkGroups } from "../hooks/useNetworkGroups";
 import { Network } from "../model/network";
 
-import { Link } from "./Link";
+import { useNetworks } from "../hooks/useNetworks";
 
 const buttonStyle = css`
 	display: flex;
@@ -28,22 +27,6 @@ const buttonStyle = css`
 	}
 `;
 
-const headerStyle = css`
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	padding-top: 12px;
-	padding-bottom: 20px;
-
-	line-height: 1.2;
-
-	a {
-		font-weight: 400;
-		cursor: pointer;
-	}
-`;
-
 const menuItemStyle = css`
 	.MuiListItemIcon-root {
 		min-width: 0px;
@@ -95,60 +78,52 @@ interface NetworkSelectProps extends Omit<ButtonProps, "value" | "onChange"> {
 export const NetworkSelect = (props: NetworkSelectProps) => {
 	const { value, multiselect, onChange, ...buttonProps } = props;
 
-	const networkGroups = useNetworkGroups();
+	const networks = useNetworks();
 
 	const [anchorEl, setAnchorEl] = useState<HTMLElement>();
 
-	const open = !!anchorEl;
+	const handleClose = useCallback(() => setAnchorEl(undefined), []);
 
-	const setSelection = useCallback((networks: Network[]) => {
+	const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+
+	const setSelection = useCallback((selected: Network[]) => {
 		const newValue = [];
 
-		for (const networkGroup of networkGroups) {
-			for (const network of networkGroup.networks) {
-				if (networks.includes(network)) {
-					newValue.push(network);
-				}
+		for (const network of networks) {
+			if (selected.includes(network)) {
+				newValue.push(network);
 			}
 		}
 
 		onChange?.(newValue, true);
 		handleClose();
-	}, [onChange]);
+	}, [networks, onChange]);
 
-	const addSelection = useCallback((networks: Network[]) => {
+	const addSelection = useCallback((selected: Network[]) => {
 		const newValue = [];
 
-		for (const networkGroup of networkGroups) {
-			for (const network of networkGroup.networks) {
-				if (networks.includes(network) || value.includes(network)) {
-					newValue.push(network);
-				}
+		for (const network of networks) {
+			if (selected.includes(network) || value.includes(network)) {
+				newValue.push(network);
 			}
 		}
 
 		onChange?.(newValue, true);
-	}, [value, networkGroups, onChange]);
+	}, [value, networks, onChange]);
 
-	const removeSelection = useCallback((networks: Network[]) => {
+	const removeSelection = useCallback((selected: Network[]) => {
 		const newValue = [];
 
-		for (const networkGroup of networkGroups) {
-			for (const network of networkGroup.networks) {
-				if (value.includes(network) && !networks.includes(network)) {
-					newValue.push(network);
-				}
+		for (const network of networks) {
+			if (value.includes(network) && !selected.includes(network)) {
+				newValue.push(network);
 			}
 		}
 
 		onChange?.(newValue, true);
-	}, [value, networkGroups, onChange]);
-
-	const handleClose = useCallback(() => setAnchorEl(undefined), []);
-
-	const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl(event.currentTarget);
-	}, []);
+	}, [value, networks, onChange]);
 
 	const handleItemClick = useCallback((network: Network, event: React.MouseEvent) => {
 		if ("key" in event && event.key === " ") {
@@ -164,8 +139,15 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 		setSelection([network]);
 	}, [value, addSelection, setSelection]);
 
-	console.log("value", value);
+	useEffect(() => {
+		if(value.length === 0 && networks.length === 1) {
+			onChange([networks[0]!], false);
+		}
+	}, [networks, value]);
+
+	const open = !!anchorEl;
 
+	console.log("value", value);
 
 	return (
 		<>
@@ -207,7 +189,7 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 					"aria-labelledby": "basic-button",
 				}}
 			>
-				{multiselect && [
+				{networks.length > 1 && multiselect && [
 					<MenuItem
 						css={menuItemStyle}
 						selected={value.length === 0}
@@ -221,54 +203,31 @@ export const NetworkSelect = (props: NetworkSelectProps) => {
 					</MenuItem>,
 					<Divider key="all-divider" />
 				]}
-				{networkGroups.map((group, index) => {
-					const allSelected = group.networks.every(it => value.includes(it));
-
-					return [
-						index > 0 && <Divider key={`divider-${index}`} />,
-						<ListSubheader css={headerStyle} key={`subheader-${index}`}>
-							<div>
-								{group.relayChainNetwork?.displayName || "Other"}{" "}
-								{group.relayChainNetwork && <><br /><span style={{fontSize: 12}}>and parachains</span></>}
-							</div>
-							{multiselect && (
-								<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={(ev) => handleItemClick(network, ev)}
-								key={network.name}
-							>
-								<ListItemIcon>
-									<img
-										src={network.icon}
-										css={iconStyle}
-									/>
-								</ListItemIcon>
-								<ListItemText>{network.displayName}</ListItemText>
-								{multiselect && (
-									<Checkbox
-										css={checkboxStyle}
-										checked={value.includes(network)}
-										onChange={(ev, checked) => checked ? addSelection([network]) : removeSelection([network])}
-										onClick={(ev) => ev.stopPropagation()}
-										disableRipple
-									/>
-								)}
-							</MenuItem>
-						))
-					];
-				})}
+				{networks.map((network) => (
+					<MenuItem
+						css={menuItemStyle}
+						selected={value.includes(network)}
+						onClick={(ev) => handleItemClick(network, ev)}
+						key={network.name}
+					>
+						<ListItemIcon>
+							<img
+								src={network.icon}
+								css={iconStyle}
+							/>
+						</ListItemIcon>
+						<ListItemText>{network.displayName}</ListItemText>
+						{networks.length > 1 && multiselect && (
+							<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/networks.json b/src/networks.json
index d6c4852d..41a8fe36 100644
--- a/src/networks.json
+++ b/src/networks.json
@@ -1,408 +1,4 @@
 [
-    {
-        "name": "acala",
-        "displayName": "Acala",
-        "icon": "/assets/network-icons/acala.svg",
-        "color": "#645aff",
-        "website": "https://acala.network/",
-        "parachainId": 2000,
-        "relayChain": "polkadot",
-        "prefix": 10,
-        "decimals": 12,
-        "symbol": "ACA",
-        "squids": {
-            "archive": "https://acala.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-acala/graphql",
-            "main": "https://squid.subsquid.io/gs-main-acala/graphql"
-        },
-        "coinGeckoId": "acala"
-    },
-    {
-        "name": "aleph-zero-testnet",
-        "displayName": "Aleph Zero Testnet",
-        "icon": "/assets/network-icons/aleph-zero-testnet.png",
-        "color": "#00ccab",
-        "website": "https://testnet.alephzero.org/",
-        "prefix": 42,
-        "decimals": 12,
-        "symbol": "TZERO",
-        "squids": {
-            "archive": "https://aleph-zero-testnet.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-aleph-zero-testnet/graphql"
-        }
-    },
-    {
-        "name": "amplitude",
-        "displayName": "Amplitude",
-        "icon": "/assets/network-icons/amplitude.svg",
-        "color": "#5defa7",
-        "website": "https://pendulumchain.org/amplitude/",
-        "parachainId": 2124,
-        "relayChain": "kusama",
-        "prefix": 57,
-        "decimals": 12,
-        "symbol": "AMPE",
-        "squids": {
-            "archive": "https://amplitude.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-amplitude/graphql",
-            "main": "https://squid.subsquid.io/gs-main-amplitude/graphql"
-        }
-    },
-    {
-        "name": "astar",
-        "displayName": "Astar Network",
-        "icon": "/assets/network-icons/astar.png",
-        "color": "#1b6dc1d9",
-        "website": "https://astar.network/",
-        "parachainId": 2006,
-        "relayChain": "polkadot",
-        "prefix": 5,
-        "decimals": 18,
-        "symbol": "ASTR",
-        "squids": {
-            "archive": "https://astar.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-astar/graphql",
-            "main": "https://squid.subsquid.io/gs-main-astar/graphql"
-        },
-        "coinGeckoId": "astar"
-    },
-    {
-        "name": "bajun",
-        "displayName": "Bajun Network",
-        "icon": "/assets/network-icons/bajun.png",
-        "color": "#161212",
-        "website": "https://ajuna.io/",
-        "parachainId": 2119,
-        "relayChain": "kusama",
-        "prefix": 1337,
-        "decimals": 12,
-        "symbol": "BAJU",
-        "squids": {
-            "archive": "https://bajun.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-bajun/graphql",
-            "main": "https://squid.subsquid.io/gs-main-bajun/graphql"
-        },
-        "coinGeckoId": "ajuna-network"
-    },
-    {
-        "name": "bifrost",
-        "displayName": "Bifrost Kusama",
-        "icon": "/assets/network-icons/bifrost.svg",
-        "color": "#5a25f0",
-        "website": "https://bifrost.finance/",
-        "parachainId": 2001,
-        "relayChain": "kusama",
-        "prefix": 6,
-        "decimals": 12,
-        "symbol": "BNC",
-        "squids": {
-            "archive": "https://bifrost.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-bifrost/graphql"
-        },
-        "coinGeckoId": "bifrost-native-coin"
-    },
-    {
-        "name": "calamari",
-        "displayName": "Calamari Network",
-        "icon": "/assets/network-icons/calamari.png",
-        "color": "#000000",
-        "website": "https://www.calamari.network/",
-        "parachainId": 2084,
-        "relayChain": "kusama",
-        "prefix": 78,
-        "decimals": 12,
-        "symbol": "KMA",
-        "squids": {
-            "archive": "https://calamari.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-calamari/graphql",
-            "main": "https://squid.subsquid.io/gs-main-calamari/graphql"
-        },
-        "coinGeckoId": "calamari-network"
-    },
-    {
-        "name": "equilibrium",
-        "displayName": "Equilibrium",
-        "icon": "/assets/network-icons/equilibrium.png",
-        "color": "#1792ff",
-        "website": "https://equilibrium.io/",
-        "prefix": 68,
-        "decimals": 9,
-        "symbol": "EQ",
-        "squids": {
-            "archive": "https://equilibrium.explorer.subsquid.io/graphql"
-        }
-    },
-    {
-        "name": "gmordie",
-        "displayName": "GM",
-        "icon": "/assets/network-icons/gmordie.png",
-        "website": "https://gmordie.com/",
-        "parachainId": 2123,
-        "relayChain": "kusama",
-        "prefix": 7013,
-        "decimals": 12,
-        "symbol": "FREN",
-        "squids": {
-            "archive": "https://gmordie.explorer.subsquid.io/graphql",
-            "main": "https://squid.subsquid.io/gs-main-gmordie/graphql"
-        }
-    },
-    {
-        "name": "hydradx",
-        "displayName": "HydraDX",
-        "icon": "/assets/network-icons/hydradx.svg",
-        "color": "#f653a2",
-        "website": "https://hydradx.io/",
-        "parachainId": 2034,
-        "relayChain": "polkadot",
-        "prefix": 63,
-        "decimals": 12,
-        "symbol": "HDX",
-        "squids": {
-            "archive": "https://hydradx.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-hydradx/graphql",
-            "main": "https://squid.subsquid.io/gs-main-hydradx/graphql"
-        },
-        "coinGeckoId": "hydradx"
-    },
-    {
-        "name": "interlay",
-        "displayName": "Interlay",
-        "icon": "/assets/network-icons/interlay.svg",
-        "color": "#3e96ff",
-        "website": "https://interlay.io/",
-        "parachainId": 2032,
-        "relayChain": "polkadot",
-        "prefix": 2032,
-        "decimals": 10,
-        "symbol": "INTR",
-        "squids": {
-            "archive": "https://interlay.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-interlay/graphql"
-        },
-        "coinGeckoId": "interlay"
-    },
-    {
-        "name": "invarch-tinkernet",
-        "displayName": "InvArch Tinkernet",
-        "icon": "/assets/network-icons/invarch-tinkernet.svg",
-        "website": "https://invarch.network/tinkernet/",
-        "parachainId": 2125,
-        "relayChain": "kusama",
-        "prefix": 117,
-        "decimals": 12,
-        "symbol": "TNKR",
-        "squids": {
-            "archive": "https://invarch-tinkernet.explorer.subsquid.io/graphql"
-        }
-    },
-    {
-        "name": "joystream",
-        "displayName": "Joystream",
-        "icon": "/assets/network-icons/joystream.svg",
-        "color": "#4038ff",
-        "website": "https://joystream.org/",
-        "prefix": 126,
-        "decimals": 10,
-        "symbol": "JOY",
-        "squids": {
-            "archive": "https://joystream.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-joystream/graphql"
-        },
-        "coinGeckoId": "joystream"
-    },
-    {
-        "name": "karura",
-        "displayName": "Karura",
-        "icon": "/assets/network-icons/karura.svg",
-        "color": "#ff4c3b",
-        "website": "https://karura.network/",
-        "parachainId": 2000,
-        "relayChain": "kusama",
-        "prefix": 8,
-        "decimals": 12,
-        "symbol": "KAR",
-        "squids": {
-            "archive": "https://karura.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-karura/graphql",
-            "main": "https://squid.subsquid.io/gs-main-karura/graphql"
-        },
-        "coinGeckoId": "karura"
-    },
-    {
-        "name": "khala",
-        "displayName": "Khala Network",
-        "icon": "/assets/network-icons/khala.svg",
-        "color": "#03f3f3",
-        "website": "https://www.phala.network/khala/",
-        "parachainId": 2004,
-        "relayChain": "kusama",
-        "prefix": 30,
-        "decimals": 12,
-        "symbol": "PHA",
-        "squids": {
-            "archive": "https://khala.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-khala/graphql",
-            "main": "https://squid.subsquid.io/gs-main-khala/graphql"
-        },
-        "coinGeckoId": "pha"
-    },
-    {
-        "name": "kintsugi",
-        "displayName": "Kintsugi",
-        "icon": "/assets/network-icons/kintsugi.svg",
-        "color": "#1a0a2d",
-        "website": "https://kintsugi.interlay.io/",
-        "parachainId": 2092,
-        "relayChain": "kusama",
-        "prefix": 2092,
-        "decimals": 12,
-        "symbol": "KINT",
-        "squids": {
-            "archive": "https://kintsugi.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-kintsugi/graphql"
-        },
-        "coinGeckoId": "kintsugi"
-    },
-    {
-        "name": "kusama",
-        "displayName": "Kusama",
-        "icon": "/assets/network-icons/kusama.svg",
-        "color": "#000000",
-        "website": "https://kusama.network/",
-        "parachainId": 0,
-        "relayChain": "kusama",
-        "prefix": 2,
-        "decimals": 12,
-        "symbol": "KSM",
-        "squids": {
-            "archive": "https://kusama.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-kusama/graphql",
-            "main": "https://squid.subsquid.io/gs-main-kusama/graphql",
-            "identites": "https://squid.subsquid.io/gs-main-kusama/graphql",
-            "stats": "https://squid.subsquid.io/gs-stats-kusama/graphql"
-        },
-        "coinGeckoId": "kusama"
-    },
-    {
-        "name": "litentry",
-        "displayName": "Litentry",
-        "icon": "/assets/network-icons/litentry.svg",
-        "color": "linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)",
-        "website": "https://litentry.com/",
-        "parachainId": 2013,
-        "relayChain": "polkadot",
-        "prefix": 31,
-        "decimals": 12,
-        "symbol": "LIT",
-        "squids": {
-            "archive": "https://litentry.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-litentry/graphql",
-            "main": "https://squid.subsquid.io/gs-main-litentry/graphql"
-        },
-        "coinGeckoId": "litentry"
-    },
-    {
-        "name": "litmus",
-        "displayName": "Litmus",
-        "icon": "/assets/network-icons/litmus.webp",
-        "color": "#6822fb",
-        "website": "https://kusama-crowdloan.litentry.com/",
-        "parachainId": 2106,
-        "relayChain": "kusama",
-        "prefix": 131,
-        "decimals": 12,
-        "symbol": "LIT",
-        "squids": {
-            "archive": "https://litmus.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-litmus/graphql",
-            "main": "https://squid.subsquid.io/gs-main-litmus/graphql"
-        },
-        "coinGeckoId": "litentry"
-    },
-    {
-        "name": "moonbeam",
-        "displayName": "Moonbeam",
-        "icon": "/assets/network-icons/moonbeam.png",
-        "color": "#53cbc9",
-        "website": "https://moonbeam.network/",
-        "parachainId": 2004,
-        "relayChain": "polkadot",
-        "prefix": 1284,
-        "decimals": 18,
-        "symbol": "GLMR",
-        "squids": {
-            "archive": "https://moonbeam.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-moonbeam/graphql",
-            "main": "https://squid.subsquid.io/gs-main-moonbeam/graphql"
-        },
-        "coinGeckoId": "moonbeam"
-    },
-    {
-        "name": "moonriver",
-        "displayName": "Moonriver",
-        "icon": "/assets/network-icons/moonriver.png",
-        "color": "#0e132e",
-        "website": "https://moonbeam.network/",
-        "parachainId": 2023,
-        "relayChain": "kusama",
-        "prefix": 1285,
-        "decimals": 18,
-        "symbol": "MOVR",
-        "squids": {
-            "archive": "https://moonriver.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-moonriver/graphql",
-            "main": "https://squid.subsquid.io/gs-main-moonriver/graphql"
-        },
-        "coinGeckoId": "moonriver"
-    },
-    {
-        "name": "peaq",
-        "displayName": "peaq",
-        "icon": "/assets/network-icons/peaq.svg",
-        "website": "https://peaq.network/",
-        "prefix": 1221,
-        "decimals": 18,
-        "symbol": "PEAQ",
-        "squids": {
-            "archive": "https://peaq.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-peaq/graphql"
-        }
-    },
-    {
-        "name": "pendulum",
-        "displayName": "Pendulum",
-        "icon": "/assets/network-icons/pendulum.svg",
-        "website": "https://pendulumchain.org/",
-        "parachainId": 2094,
-        "relayChain": "polkadot",
-        "prefix": 56,
-        "decimals": 12,
-        "symbol": "PEN",
-        "squids": {
-            "archive": "https://pendulum.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-pendulum/graphql",
-            "main": "https://squid.subsquid.io/gs-main-pendulum/graphql"
-        },
-        "coinGeckoId": "pendulum-chain"
-    },
-    {
-        "name": "phala",
-        "displayName": "Phala Network",
-        "icon": "/assets/network-icons/phala.svg",
-        "color": "#c6fa4c",
-        "website": "https://www.phala.network/",
-        "parachainId": 2035,
-        "relayChain": "polkadot",
-        "prefix": 30,
-        "decimals": 12,
-        "symbol": "PHA",
-        "squids": {
-            "archive": "https://phala.explorer.subsquid.io/graphql",
-            "main": "https://squid.subsquid.io/gs-main-phala/graphql"
-        },
-        "coinGeckoId": "pha"
-    },
     {
         "name": "polkadot",
         "displayName": "Polkadot",
@@ -422,144 +18,5 @@
             "stats": "https://squid.subsquid.io/gs-stats-polkadot/graphql"
         },
         "coinGeckoId": "polkadot"
-    },
-    {
-        "name": "robonomics",
-        "displayName": "Robonomics",
-        "icon": "/assets/network-icons/robonomics.svg",
-        "color": "#2949d3",
-        "website": "https://robonomics.network/",
-        "parachainId": 2048,
-        "relayChain": "kusama",
-        "prefix": 32,
-        "decimals": 9,
-        "symbol": "XRT",
-        "squids": {
-            "archive": "https://robonomics.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-robonomics/graphql",
-            "main": "https://squid.subsquid.io/gs-main-robonomics/graphql"
-        },
-        "coinGeckoId": "robonomics-network"
-    },
-    {
-        "name": "rococo",
-        "displayName": "Rococo",
-        "icon": "/assets/network-icons/rococo.svg",
-        "color": "#6f36dc",
-        "website": "https://polkadot.network/tag/rococo/",
-        "prefix": 42,
-        "decimals": 12,
-        "symbol": "ROC",
-        "squids": {
-            "archive": "https://rococo.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-rococo/graphql"
-        }
-    },
-    {
-        "name": "shibuya",
-        "displayName": "Shibuya Network",
-        "icon": "/assets/network-icons/shibuya.webp",
-        "website": "https://www.shibuya.xyz/",
-        "prefix": 5,
-        "decimals": 18,
-        "symbol": "SBY",
-        "squids": {
-            "archive": "https://shibuya.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-shibuya/graphql"
-        }
-    },
-    {
-        "name": "shiden",
-        "displayName": "Shiden Network",
-        "icon": "/assets/network-icons/shiden.webp",
-        "color": "#5923b2",
-        "website": "https://shiden.astar.network/",
-        "parachainId": 2007,
-        "relayChain": "kusama",
-        "prefix": 5,
-        "decimals": 18,
-        "symbol": "SDN",
-        "squids": {
-            "archive": "https://shiden.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-shiden/graphql",
-            "main": "https://squid.subsquid.io/gs-main-shiden/graphql"
-        },
-        "coinGeckoId": "shiden"
-    },
-    {
-        "name": "statemine",
-        "displayName": "Statemine",
-        "icon": "/assets/network-icons/statemine.png",
-        "website": "https://www.parity.io/",
-        "parachainId": 1000,
-        "relayChain": "kusama",
-        "prefix": 2,
-        "decimals": 12,
-        "symbol": "KSM",
-        "squids": {
-            "archive": "https://statemine.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-statemine/graphql",
-            "main": "https://squid.subsquid.io/gs-main-statemine/graphql"
-        },
-        "coinGeckoId": "kusama"
-    },
-    {
-        "name": "statemint",
-        "displayName": "Statemint",
-        "icon": "/assets/network-icons/statemint.png",
-        "website": "https://www.parity.io/",
-        "parachainId": 1000,
-        "relayChain": "polkadot",
-        "prefix": 0,
-        "decimals": 10,
-        "symbol": "DOT",
-        "squids": {
-            "archive": "https://statemint.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-statemint/graphql"
-        },
-        "coinGeckoId": "polkadot"
-    },
-    {
-        "name": "subsocial",
-        "displayName": "Subsocial",
-        "icon": "/assets/network-icons/subsocial.png",
-        "color": "#69058c",
-        "website": "http://subsocial.network/",
-        "relayChain": "polkadot",
-        "prefix": 28,
-        "decimals": 10,
-        "symbol": "SUB",
-        "squids": {
-            "archive": "https://subsocial.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-subsocial/graphql",
-            "main": "https://squid.subsquid.io/gs-main-subsocial/graphql"
-        }
-    },
-    {
-        "name": "vara",
-        "displayName": "Vara",
-        "icon": "/assets/network-icons/vara.svg",
-        "color": "#32e37d",
-        "website": "https://vara-network.io/",
-        "prefix": 137,
-        "decimals": 12,
-        "symbol": "VARA",
-        "squids": {
-            "archive": "https://vara.explorer.subsquid.io/graphql",
-            "explorer": "https://squid.subsquid.io/gs-explorer-vara/graphql"
-        }
-    },
-    {
-        "name": "xx-network",
-        "displayName": "xx network",
-        "icon": "/assets/network-icons/xx-network.svg",
-        "website": "https://xx.network/",
-        "prefix": 55,
-        "decimals": 9,
-        "symbol": "XX",
-        "squids": {
-            "archive": "https://xx-network.explorer.subsquid.io/graphql"
-        },
-        "coinGeckoId": "xxcoin"
     }
-]
\ No newline at end of file
+]
diff --git a/src/screens/home.tsx b/src/screens/home.tsx
index 79cae749..b3435918 100644
--- a/src/screens/home.tsx
+++ b/src/screens/home.tsx
@@ -10,6 +10,7 @@ import { Card } from "../components/Card";
 import { ButtonLink } from "../components/ButtonLink";
 
 import { useNetworkGroups } from "../hooks/useNetworkGroups";
+import { useNetworks } from "../hooks/useNetworks";
 
 const containerStyle = (theme: Theme) => css`
 	--content-min-height: 900px;
@@ -130,33 +131,25 @@ const networksStyle = css`
 	margin-top: 64px;
 	margin-bottom: 48px;
 	padding: 0 16px;
-`;
 
-const networksGroupStyle = (theme: Theme) => css`
-	margin: 24px 0;
-	padding: 16px;
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(180px, auto));
+	display: flex;
+	flex-wrap: wrap;
 	gap: 16px;
-
-	${theme.breakpoints.up("md")} {
-		padding: 16px;
-	}
+	justify-content: center;
 `;
 
-const newtorkGroupTitleStyle = css`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	font-size: 18px;
-	font-weight: 700;
-	opacity: .75;
+const networkStyle = (theme: Theme) => css`
+	margin: 0;
+	padding: 8px;
+
+	width: 100%;
+
+	${theme.breakpoints.up("sm")} {
+		width: 230px;
+	}
 
-	div {
-		font-size: 16px;
-		font-weight: 400;
+	${theme.breakpoints.up("md")} {
+		padding: 8px;
 	}
 `;
 
@@ -182,12 +175,6 @@ const networkButtonStyle = css`
 		margin-right: 12px;
 		margin-left: 4px;
 	}
-
-	&[data-network=polkadot],
-	&[data-network=kusama] {
-		grid-row-start: 2;
-		grid-row-end: 4;
-	}
 `;
 
 const footerStyle = css`
@@ -199,7 +186,7 @@ const footerStyle = css`
 `;
 
 export const HomePage = () => {
-	const networkGroups = useNetworkGroups();
+	const networks = useNetworks();
 
 	return (
 		<div css={containerStyle}>
@@ -214,20 +201,12 @@ export const HomePage = () => {
 					/>
 				</div>
 				<div css={networksStyle} data-test="networks">
-					{networkGroups.map((group) =>
-						<Card css={networksGroupStyle} key={group.relayChainNetwork?.name || "other"}>
-							<div css={newtorkGroupTitleStyle}>
-								{group.relayChainNetwork?.displayName || "Other"}
-								{group.relayChainNetwork && <div>and parachains</div>}
-							</div>
-							{group.networks.map(network =>
-								network && (
-									<ButtonLink to={`/${network.name}`} key={network.name} css={networkButtonStyle} data-network={network.name}>
-										<img src={network.icon} />
-										{network.displayName}
-									</ButtonLink>
-								)
-							)}
+					{networks.map((network) =>
+						<Card css={networkStyle} key={network.name}>
+							<ButtonLink to={`/${network.name}`} key={network.name} css={networkButtonStyle} data-network={network.name}>
+								<img src={network.icon} />
+								{network.displayName}
+							</ButtonLink>
 						</Card>
 					)}
 				</div>