diff --git a/README.md b/README.md index f9d04729..bd6bbb3a 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,16 @@ 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. +> +> Read more about [data sources](https://github.com/topmonks/calamar/wiki/Data-sources). +> +> *We are looking for a solution to make Calamar online and publicly available again, but we have no ETA yet.* +> +> We apologize for any inconvenience. + ## Setup Clone the repo and install the NPM dependencies. @@ -14,6 +24,27 @@ $ cd calamar $ npm install ``` +Edit `src/networks.json` and configure your network and its [data source's](https://github.com/topmonks/calamar/wiki/Data-sources) endpoints. + +
+ Network configuration structure + +- **name**: network identificator used in url 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"`) +- **prefix**: SS58 prefix (required, e.g. `0`) +- **decimals**: number of decimals for the network's symbol (required, e.g. `10`) +- **symbol**: network's symbol (required, `"DOT"`) +- **squids**: + - **archive**: GraphQL API explorer of the [Firesquid archive](https://github.com/topmonks/calamar/wiki/Data-sources#firesquid-archive) (required, e.g. `"https://polkadot.explorer.subsquid.io/graphql"`) + - **explorer**: [GiantSquid explorer](https://github.com/topmonks/calamar/wiki/Data-sources#giantsquid-explorer) (optional, but highly recommended, e.g. `"https://squid.subsquid.io/gs-explorer-polkadot/graphql"`) + - **main**: [GiantSquid main](https://github.com/topmonks/calamar/wiki/Data-sources#giantsquid-main) (optional, e.g. `"https://squid.subsquid.io/gs-main-polkadot/graphql"`) + - **identites**: [GiantSquid main](https://github.com/topmonks/calamar/wiki/Data-sources#giantsquid-main) if it provides indentity data (optional, e.g. `"https://squid.subsquid.io/gs-main-polkadot/graphql"`) + - **stats**: [GianSquid stats](https://github.com/topmonks/calamar/wiki/Data-sources#giantsquid-stats) (optional, e.g. `"https://squid.subsquid.io/gs-stats-polkadot/graphql"`) +- **coinGeckoId**: CoinGecko network ID to fetch USD values (optional, `"polkadot"`) +
+ ## 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 { export const NetworkSelect = (props: NetworkSelectProps) => { const { value, multiselect, onChange, ...buttonProps } = props; - const networkGroups = useNetworkGroups(); + const networks = useNetworks(); const [anchorEl, setAnchorEl] = useState(); - const open = !!anchorEl; + const handleClose = useCallback(() => setAnchorEl(undefined), []); - const setSelection = useCallback((networks: Network[]) => { + const handleClick = useCallback((event: React.MouseEvent) => { + 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) => { - 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 && [ { , ]} - {networkGroups.map((group, index) => { - const allSelected = group.networks.every(it => value.includes(it)); - - return [ - index > 0 && , - -
- {group.relayChainNetwork?.displayName || "Other"}{" "} - {group.relayChainNetwork && <>
and parachains} -
- {multiselect && ( - allSelected - ? removeSelection(group.networks) - : addSelection(group.networks) - } - > - {allSelected ? "deselect" : "select"} all - - )} -
, - group.networks.map((network) => ( - handleItemClick(network, ev)} - key={network.name} - > - - - - {network.displayName} - {multiselect && ( - checked ? addSelection([network]) : removeSelection([network])} - onClick={(ev) => ev.stopPropagation()} - disableRipple - /> - )} - - )) - ]; - })} + {networks.map((network) => ( + handleItemClick(network, ev)} + key={network.name} + > + + + + {network.displayName} + {networks.length > 1 && multiselect && ( + checked ? addSelection([network]) : removeSelection([network])} + onClick={(ev) => ev.stopPropagation()} + disableRipple + /> + )} + + ))} ); diff --git a/src/networks.json b/src/networks.json index d6c4852d..fce64882 100644 --- a/src/networks.json +++ b/src/networks.json @@ -1,416 +1,9 @@ [ - { - "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", "icon": "/assets/network-icons/polkadot.svg", "color": "#e6007a", - "website": "https://polkadot.network/", - "parachainId": 0, - "relayChain": "polkadot", "prefix": 0, "decimals": 10, "symbol": "DOT", @@ -422,144 +15,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 (
@@ -214,20 +201,12 @@ export const HomePage = () => { />
- {networkGroups.map((group) => - -
- {group.relayChainNetwork?.displayName || "Other"} - {group.relayChainNetwork &&
and parachains
} -
- {group.networks.map(network => - network && ( - - - {network.displayName} - - ) - )} + {networks.map((network) => + + + + {network.displayName} + )}